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.

block

3D UI Reveal

hf

Perspective 3D reveal animation for UI elements

block

AI Chat Reveal

hf

A 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

block

App Showcase

hf

Fitness app product showcase with three floating smartphone screens

component

Chat Message

hf

One 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

component

Chat Thread

hf

The 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

block

ChatGPT Exchange

hf

A portrait ChatGPT-style exchange types and sends a prompt, streams an answer, assembles a comparison table, and scrolls back through the result

block

Claude Exchange

hf

A portrait Claude-style exchange types a prompt, works through search and reasoning steps, then streams a detailed answer with citations and actions

component

Device Frame Stage

hf

A 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

block

GitHub Sponsors

rcn

Self-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.

block

GitHub Stars

rcn

Inertial 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.

block

iOS 26 Liquid Glass Home Screen

hf

3D 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.

block

Liquid Glass Context Menu

hf

Frosted glass context menu panel drifting over an aurora shader background

block

Liquid Glass Media Controls

hf

Frosted glass media control panels spreading over an aurora shader background

block

Liquid Glass Notification

hf

Frosted glass notification cards floating over an aurora shader background

block

Liquid Glass Widgets

hf

Frosted glass stat cards, showcase panel and pill chips over an aurora shader background

block

macOS Tahoe Liquid Glass Desktop

hf

3D MacBook with a macOS Tahoe-style desktop, glass menu bar, Finder window, dock, and cinematic device camera move.

component

Marker Checklist Card

hf

A 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

block

Message Thread Reveal

hf

A 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

component

Multi Device Splay

hf

Phone, tablet, and desktop product mockups fan from a centered stack into a proud splayed arrangement with a subtle idle float.

block

Notes Reveal

hf

A 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

component

Notes Typing

hf

The 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

block

Notification Cascade

hf

Phone 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

component

Product Promo

hf

Multi-scene product showcase with SVG assets

block

Share-Sheet Carousel

hf

A 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

block

Slack Notification Ad

hf

A portrait lock screen fills with escalating Slack video requests before Animatiq delivers the payoff

component

Social Proof Card

hf

The 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

component

Sticky Mock Swap

hf

A pinned product mock cross-fades through accent-tinted feature states while matching captions rise, hold, and exit beside it.

component

Testimonial Card

hf

Reveals a customer quote at reading pace, then settles its avatar, author name, and handle beneath as a clean proof beat.

component

Testimonial Proof Card

hf

A 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.

component

Vector Editor Rig

hf

A dark design-tool app chrome with a live vector pen path, sequential anchor points, bezier handles, a selection frame, and theme-driven blue accents.