Product demos
Product demo and device scene components
Device frames, app walkthroughs, liquid-glass surfaces, proof cards, and polished product moments for launches and demos.
Product video has a recognisable vocabulary: the device on a stage, the screen recording that punches in, the message thread that types itself. These are the assembled versions of those moments, with the framing and timing already resolved.
Several are built around real UI surfaces — chat exchanges, notes, notifications, share sheets — so a product demo can show the interaction rather than describe it.
30 verified components. Browse every category.
3D UI Reveal
hfPerspective 3D reveal animation for UI elements
AI Chat Reveal
hfA question is typed on a rising keyboard, sent, and answered by an AI that streams its reply word by word on a measured token rhythm - thinking dot, uneven bursts, bulleted list - before the app cuts to a branded closing card
App Showcase
hfFitness app product showcase with three floating smartphone screens
Chat Message
hfOne message arrives on the measured entry - scale 0.75, 0.12s, growing from its sender's corner. The type is an enum switched like marker-highlight's style: a received or sent bubble with a real tail, a large emoji row, an image, or a link card with title and domain. The atom that chat-thread builds conversations from
Chat Thread
hfThe measured conversation as one mountable scene at full fidelity: status bar, back badge, avatar and name pill, bubbles with real iMessage tails, a Delivered receipt, large emoji rows, a media placeholder, a link card, and typing dots holding the beat. Every message picks its type by prefix - recv:/sent: text, emoji: a large row, img media, card:Title~domain a link card - and heights are measured at mount so any thread fits
ChatGPT Exchange
hfA portrait ChatGPT-style exchange types and sends a prompt, streams an answer, assembles a comparison table, and scrolls back through the result
Claude Exchange
hfA portrait Claude-style exchange types a prompt, works through search and reasoning steps, then streams a detailed answer with citations and actions
Device Frame Stage
hfA phone or tablet mockup staged as a physical scene prop with a screen slot for arbitrary reconstructed UI, rising onto the stage, settling, and holding an idle float
GitHub Sponsors
rcnSelf-drawing Sponsors heart that docks to a header, every sponsor avatar blur-staggering into a grid, then a thank-you headline and a CTA. Single seek-safe timeline, 270 frames at 30fps.
GitHub Stars
rcnInertial fly-through of a repo's stargazers with a synced count-up odometer that locks on the total. Horizontal 16:9 or vertical 9:16.
iOS 26 Liquid Glass Home Screen
hf3D iPhone with a normal iOS 26 home screen, liquid glass app icons, shader wallpaper, dock, and fluid glass notifications that drop from the status area onto a GLTF device model.
Liquid Glass Context Menu
hfFrosted glass context menu panel drifting over an aurora shader background
Liquid Glass Media Controls
hfFrosted glass media control panels spreading over an aurora shader background
Liquid Glass Notification
hfFrosted glass notification cards floating over an aurora shader background
Liquid Glass Widgets
hfFrosted glass stat cards, showcase panel and pill chips over an aurora shader background
macOS Tahoe Liquid Glass Desktop
hf3D MacBook with a macOS Tahoe-style desktop, glass menu bar, Finder window, dock, and cinematic device camera move.
Marker Checklist Card
hfA hand-lettered paper card: marker headline with an underline and a drawn ellipse around one word, then three checklist rows whose checks draw themselves on - typewriter labels, marker values. The paper-and-marker sibling of mk-specs-list's clean professional rows
Message Thread Reveal
hfA full text conversation plays out on a phone - bubbles popping in, typing indicators, a shared link card, emoji, delivered receipts - with the whole thread scrolling up beat by beat until a closing card lands. The complete chat ad-template, measured message by message
Multi Device Splay
hfPhone, tablet, and desktop product mockups fan from a centered stack into a proud splayed arrangement with a subtle idle float.
Notes Reveal
hfA personal note is typed character by character in a notes app - caret riding every letter, the page scrolling up on measured settle curves as each line lands - then cuts to a hand-lettered paper card with a marker headline and a ticked checklist
Notes Typing
hfThe notes-app confession as a mountable scene: a bold title, then body lines typed character by character on the measured human keystroke rhythm, the caret riding every landed character and jumping down at each paragraph. For a bare prompt line use typed-prompt; for an even mechanical reveal use typewriter
Notification Cascade
hfPhone notifications land one after another and stack up the screen, each banner pushing the pile down as it arrives, before the whole stack lifts away into a closing card
Product Promo
hfMulti-scene product showcase with SVG assets
Share-Sheet Carousel
hfA share sheet springs up from the bottom of the phone and cycles previews inside its card on a fast cut rhythm while the blurred ground swaps behind it, ending on an accept tap
Slack Notification Ad
hfA portrait lock screen fills with escalating Slack video requests before Animatiq delivers the payoff
Social Proof Card
hfThe app-store close as one mountable scene: wordmark, five stars, a proof line, three feature icons and a CTA capsule build in a quiet stagger and hold - measured from reference ad footage. For an animated star sweep use star-rating-fill; for a quote card use testimonial-proof-card; for a bare lockup use cta-lockup
Sticky Mock Swap
hfA pinned product mock cross-fades through accent-tinted feature states while matching captions rise, hold, and exit beside it.
Testimonial Card
hfReveals a customer quote at reading pace, then settles its avatar, author name, and handle beneath as a clean proof beat.
Testimonial Proof Card
hfA quote card whose testimonial reveals per-line through a soft mask, with an avatar disc (initials default, image slot), mono name and role, an optional company text mark, and one emphasis substring underlined in accent ink after the quote lands.
Vector Editor Rig
hfA dark design-tool app chrome with a live vector pen path, sequential anchor points, bezier handles, a selection frame, and theme-driven blue accents.