-
-
FireFlix - Fire TV OTT app with D-pad navigation and 10ft UI. Tap remote arrows to move focus between movies.
Inspiration
Fire TV is a 10ft experience - users sit far from the screen and use only a D-pad remote. I wanted to build an OTT app that feels native to Fire TV, not a stretched mobile website.
What it does
FireFlix is a Fire TV OTT app with:
- 10ft UI with large cards and focus states
- D-pad navigation (arrow keys to move between movies)
- On-screen Fire TV Remote for mobile demo
- Continue Watching and Trending rows
- Focus animation with white border and scale effect
How we built it
Built with HTML, CSS, JavaScript for Fire TV. Used CSS transforms for focus states, JavaScript for D-pad focus management. Designed for Fire OS and tested on Fire TV Stick logic.
Challenges we ran into
Getting the focus movement right for D-pad was tricky. Made it work with keyboard arrows and on-screen remote buttons to simulate real Fire TV remote.
What we learned
Learned about 10ft UI principles, Fire TV design guidelines, and how important focus states are for TV apps.
What's next for FireFlix
Add voice search with Alexa, add more categories, and build as a native Fire TV Android app.
Built With
- 10ft-ui
- amazon-fire-tv
- css
- d-pad-navigation
- fire-os
- html
- javascript
