Gallery
See what others have created
craftyunreality
@craftyunreality
Animation & Video
Design a single interface component that combines animation and video in a practical product context. Treat it as something a teammate could ship: a lesson card, product tour module, feature preview, or onboarding panel. The layout should make the media purpose obvious before interaction.
Include a visible video surface with standard playback controls, a progress bar, time display, volume, and fullscreen. Show at least one motion pattern around the media itself, such as a hover reveal, animated callout, or state transition that points attention without stealing it.
Show the key states that make this usable in a real product: idle/poster, playing, paused, buffering, and error. If the video is muted or autoplaying, make that clear in the UI. If motion is reduced or unavailable, the component should still communicate hierarchy and affordance through layout and text.
Keep the composition specific and restrained. The animation should support one primary action, and the video should feel integrated with the rest of the interface rather than pasted on top of it.
What to deliver
- Design a hi-fi component that combines motion and video in one layout
- Show a video player state with play, pause, scrub, and fullscreen controls
- Add a motion-enabled UI state such as hover, reveal, or transition
- Include loading, buffering, and error states for the video area
- Provide a muted autoplay or poster fallback state
Add a splash of creativity! Animations can be delightful surprises—like a playful loading animation or an unexpected character that reacts to user's actions.