Building the Recast TV platform at Kitty taught me that small UX details can transform how users interact with video content. One feature in particular—hover-to-play video previews—demonstrated how thoughtful implementation of modern web technologies can create moments of delight in the user journey.
The Video Discovery Challenge
Traditional video platforms force users into a commit-then-watch model—click, wait for page load, then determine if content is relevant. For Recast TV's content-rich environment, this created unnecessary friction in the discovery process.
Working with Kitty's design team, we identified an opportunity: what if users could preview content before committing to a full view?
The Technical Solution
Implementing hover-to-play previews required careful orchestration of several technologies:
- GraphQL queries fetched optimized preview versions of videos alongside metadata
- Apollo Client managed the state and caching of these assets
- TypeScript ensured type safety across the complex interaction handlers
- Event listeners detected hover state while preventing performance issues
The most challenging aspect was balancing performance with user experience. Preloading all video previews would crush performance, while loading on hover would create noticeable delays.
The Performance Compromise
Our solution: strategic preloading of videos likely to enter viewport combined with hover intent detection (distinguishing between intentional hovering versus casual mouse movement).
This approach reduced unnecessary resource consumption while maintaining the instantaneous preview experience users expect in 2025.
Working within Kitty's Scrum framework provided valuable structure—daily stand-ups kept the feature on track, while sprint reviews with the client allowed for rapid iteration based on real user feedback.
When implemented alongside our text-highlighting search functionality, Recast TV's platform transformed from a traditional content library into an interactive discovery experience.
Summary: How implementing hover-to-play video previews with GraphQL and Next.js transformed content discovery for Recast TV's digital platform.