Keyloom

Components

Every scene in Keyloom, grouped by category. Click a component to see its live preview, props, and source code.

Scenes & Effects

Standalone scene primitives — terminals, toasts, walkthroughs, cards, counters.

Hover to play
Typing Search
A search bar that types out a query character-by-character, then a mouse cursor flies in and clicks the search button.
Hover to play
Typing Composer
A GAIA-style chat composer that types out a prompt character-by-character, then a mouse cursor flies in and clicks the send button.
Hover to play
Cursor Walkthrough
A cursor that demonstrates a click → type → click flow over a screenshot. Drop in a background image and pin the click coordinates.
Hover to play
Caption Track
Word-by-word caption track. Each word springs into place at the configured cadence — set the words-per-second to match your VO.
Hover to play
TikTok Caption
Caption track driven by word-level timestamps (e.g. from Whisper). Highlights the current word, ghosts the surrounding context — built for voiceover content.
Hover to play
Stat Counter
An animated number that ticks from 0 up to a target value, with a label fading in below.
Hover to play
Spotify Player
A Spotify-style Now Playing screen with album art, a live progress bar, and playback controls. Customize the track, artist, playlist, times, and colors.
Hover to play
Tweet Post
An animated X / Twitter post — avatar, name, verified badge, body, and timestamp reveal in a staggered rise. Edit the copy, handle, avatar, and badge.
Hover to play
Lock Screen Message
An iPhone lock screen — wallpaper, big clock, and a stack of iMessage notifications that spring up. Fill 1–3 notifications; upload a custom wallpaper or per-notification avatars.
Hover to play
Telegram Messages
An animated Telegram-style chat conversation with tailed bubbles, in-bubble timestamps, and the signature blue check marks.
Hover to play
Instagram Messages
An animated Instagram DM conversation with the gradient sent bubble, typing dots, and stacking spring physics.
Hover to play
Testimonial Card
A polished testimonial — five stars, a large centered quote with an accent quote mark, avatar, name, role, and company.
Hover to play
Logo Cloud
A 'trusted by' section with a row of company logos that stagger in.
Hover to play
Pricing Card
A pricing tier card with title, big price, feature list with checkmarks, and CTA — supports a 'most popular' highlighted variant.
Hover to play
Terminal
A macOS-style terminal that types out CLI commands line by line. Highly configurable: chrome style, cursor, font size, padding, line kinds.
Hover to play
Image Scene
A full-bleed image that settles with a slow cinematic zoom, with an optional caption overlaid at the bottom.
Hover to play
Bounce Cards
A fan of image cards that springs in elastically and then spotlights each card in turn.
Hover to play
QR Code
A scannable QR code with optional center logo and caption. Choose dot or square modules, pick a brand logo preset (WhatsApp, Telegram, Slack…) or upload your own.
Hover to play
Blue Grid
Vivid cobalt-blue field with a faint square grid and a soft white corner glow.
Hover to play
Aurora Gradient
Calm animated blue gradient with soft clouds of light drifting across and a gentle bottom horizon glow.
Hover to play
White Radial Burst
White background with thin blue lines radiating outward from the center.
Hover to play
Liquid Chrome
Minimal liquid chrome surface with reflective silver and blue gradients and smooth flowing metallic shapes.
Hover to play
Futuristic Architecture
Minimal futuristic architecture with large white curved surfaces, soft blue ambient lighting, and a gentle moving light sweep.
Hover to play
Showcase Frame
A presentation frame with eyebrow, title, caption, and a configurable backdrop — wraps any other scene inside a video / browser / minimal / floating frame.

Charts

Animated data charts — bar, line, area, pie, radar, radial.

Chat & Messaging

Conversation reveals styled after iMessage, WhatsApp, Slack, and Discord.

Social

Brand-locked social UI — tweets, follow buttons, GitHub stars, Instagram posts.

Frames & Mockups

Device chrome wrappers — phone, laptop, browser window — that host any other scene inside.

GAIA

Showcase scenes for GAIA — the personal AI assistant Keyloom is built for.

Text Animations

Kinetic typography primitives — fades, slides, blurs, stagger reveals.