Cight Smart Visual Media Discovery & Recognition Inspiration How many times have you scrolled past a movie scene, an anime screenshot, or a television clip on social media, only to spend hours in the comments section asking, "What movie is this?" Existing visual search engines are designed for shopping or generic web queries, failing miserably at capturing the context of narrative media. They don’t understand actors, seasons, franchises, or emotional tones. We wanted to build a portal that acts as a "Shazam for video and images"—a seamless lens that instantly identifies any piece of media from a screenshot, camera capture, or text description, connects it to its streaming availability, and invites you into a real-time discussion space with other fans. That is how Cight was born.
What it does Cight is an advanced AI-powered media recognition and social discovery platform. By utilizing cutting-edge multimodal vision models, Cight allows users to snap a photo of a screen, upload a clip, or describe a vague memory in natural language to instantly identify movies, television shows, anime, YouTube videos, and podcasts.
Once a match is identified, Cight dynamically constructs a rich media hub containing: Instant Recognition Hub: View confidence levels, type categorization (with full support for TV seasons), and structural franchise associations (e.g., matching a scene directly to the Marvel Cinematic Universe or specific sagas).
Deep Metadata Integration: Powered by TMDB (The Movie Database) and AniList to pull in cast details, high-fidelity backdrops, trailers, and synopses. Where to Watch: Direct streaming suggestions and platform-specific links. Anime Frame-by-Frame Resolution: Leverages specialized scene recognition endpoints to resolve anime frames down to the exact episode and timecode. Community & Curation: Save findings to your personal watchlist, rate media, and join ongoing live discussions in the integrated comment feed.
How we built it Cight is built on a modern, ultra-responsive, full-stack architecture designed to handle complex visual calculations in real time: The Frontend & Interactions: Built with React 18 and Vite, utilizing Tailwind CSS for an atmospheric, cyberpunk-inspired high-density dark mode interface. Micro-interactions and fluid screen transitions are powered by Framer Motion.
AI Multimodal Core: We integrated the modern Gemini API (models/gemini-3.5-flash) utilizing structured JSON schema outputs. The vision pipeline processes base64-encoded screenshots, identifying the actors, media type, season counts, and franchises instantly. Multi-Source API Orchestration: To ensure flawless matching, we developed a dynamic lookup resolver: TMDB API processes standard cinematic and TV queries. Trace.moe & AniList APIs handle specialized anime screenshots, checking structural hashes to match individual frames with millisecond accuracy.
Cloud Persistence: Firebase Firestore acts as our real-time database, enabling instant state synchronization for watchlists, ratings, community discussions, and user scan histories across both mobile and desktop screens.
The Math Behind Match Confidence To deliver highly accurate matches, Cight implements a hybrid confidence scoring heuristic. Let represent the final match score for a given media scan: Where: is the raw classification confidence returned by the multimodal vision model. represents the title alignment coefficient derived from the normalized Levenshtein distance ( ) between the model's predicted title ( ) and the validated metadata title ( ): and are weighted hyperparameters adjusted to privilege verified API records ( , ). If , the match is treated as highly confident.
Challenges we ran into Multimodal Edge Cases: Real-world camera captures are rarely perfect; they contain screen glare, off-angle perspectives, or low-resolution frames. We resolved this by engineering precise system prompts in our Gemini pipeline to instruct the model to analyze secondary visual cues—such as actor silhouettes, set designs, color grading, and distinct typography—rather than relying solely on facial recognition.
Responsive Multi-Match UX: On wide desktop layouts, displaying multiple possible matches side-by-side was straightforward. Translating this flow to mobile screens without inducing interface clutter was incredibly challenging. We designed a horizontal, snap-scrolling card selector coupled with subtle haptic-like animations, ensuring users on any device can fluidly review, swipe, and switch between matches seamlessly.
Resolving Ambiguity: Often, a visual match could point to either a standalone movie or an ongoing TV show series. We had to write complex logic to extend the Gemini schema dynamically to detect and append seasons and franchise strings, which we then query concurrently against TMDB to provide structured metadata for all show types.
Accomplishments that we're proud of Millisecond-Level Latency: Achieved near-instantaneous search resolution by utilizing parallel promise execution across Gemini, TMDB, and AniList, avoiding blocking waterfalls. Elegant Multi-Match Handling: Cight elegantly presents multiple potential matches on both desktop and mobile layouts with a visual "MULTI-MATCH" badge, so the user is never stuck with a single incorrect guess.
Aesthetic Consistency: Created a gorgeous, premium, typography-forward dark interface that feels like a premium consumer entertainment portal rather than a basic utility tool.
What we learned The Power of Structured AI Schemas: Relying on raw text responses from LLMs is fragile. Implementing strict, nested JSON schemas (defining enums for types and strict arrays for actors/streaming links) transformed the reliability of our downstream search and UI parsing pipelines. Designing for High Density: We learned how to manage vast amounts of data confidence scales, cast members, comments, streaming links, and watch status indicators while maintaining an elegant and intuitive layout through hierarchical typography, purposeful letter-spacing, and balanced negative space.
What's next for Cight Collaborative Shared Watchlists: Allowing friend groups to build shared queues of scanned media to watch together.
Real-Time Video Stream Parsing: Extending the static screenshot capture into an active video mode, analyzing active camera feeds to identify scenes on a TV frame-by-frame on the fly. Deep Personalization: Building a local recommendations engine that learns from your scanned history and rated movies to recommend hidden cinematic gems tailored strictly to your taste.
Built With
- ai
- anilist
- firebase
- gemini
- motion
- react
- tailwindcss
- tmdb
- tracemoe
- typescript
- vite
Log in or sign up for Devpost to join the conversation.