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
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
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
iMessage Thread
A scripted iMessage conversation on a real-proportioned iPhone: typing dots, composer typing, tapback reactions, photo stacks, tappable link cards, read receipts and a status-bar clock that follows the story.
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
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, radial.

Chat & Messaging

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

Social

Brand-locked social UI โ€” tweets, GitHub stars, Instagram posts.

Text Animations

Kinetic typography primitives โ€” fades, slides, blurs, stagger reveals.