146 primitives
Entrances
31Focus Pull Stagger
CD
cd-focus-stagger180ms·expo-out·engine
|
Typewriter Reveal
CDED
cd-typewriter28-50ms/char·linear·engine
Slide + Fade Stagger
ED
ed-slide-stagger120ms·expo-out·engine
Blur-to-Sharp Reveal
ED
ed-blur-reveal200ms·expo-out·engine
Slide + Fade (Light)
NL
nl-slide-stagger150ms·ease-out·engine
Focus Pull
CD
ct-focus-pull800ms·expo-out·research
Zoom From Space
CD
ct-zoom-from-space1800ms·expo-out·research
Dolly Zoom (Vertigo)
CD
ct-dolly-zoom2000ms·expo-out·research
Animatic
Dramatic Text Scale
CD
ct-text-hero1200ms·expo-out·research
Animatic
Per-Character Stagger
CDED
ct-char-stagger30ms/char·expo-out·research
Fade In
ALL
as-fadeIn400ms·ease-out·animate.style
Fade In Up
EDNL
as-fadeInUp500ms·expo-out·animate.style
Fade In Down
EDNL
as-fadeInDown500ms·expo-out·animate.style
Fade In Left
ED
as-fadeInLeft500ms·expo-out·animate.style
Fade In Right
ED
as-fadeInRight500ms·expo-out·animate.style
Slide In Up
ALL
as-slideInUp500ms·expo-out·animate.style
Slide In Down
ALL
as-slideInDown500ms·expo-out·animate.style
Slide In Left
ALL
as-slideInLeft500ms·expo-out·animate.style
Slide In Right
ALL
as-slideInRight500ms·expo-out·animate.style
Zoom In
CD
as-zoomIn500ms·expo-out·animate.style
Form Field Reveal
NL
nl-field-reveal300ms·ease-out·breakdown
Scale Entrance
MO
mo-scale-entrance100ms·expo-out·engine
Launch
Text Hero Entrance
MO
mo-text-hero400ms·expo-out·engine
—
Stat Reveal Pop
MO
mo-stat-reveal150ms·expo-out·engine
Chat Typewriter to Bubble
EDCD
bk-chat-typewriter-submit2400ms·linear·breakdown
Report Card Entrance
EDCD
bk-report-card-materialize500ms·expo-out·breakdown
Editorial Typewriter
ED
ed-typewriter30ms/char·linear·engine
Fade In
CDEDNL
fade-in400ms·ease-out·engine
Bar Chart Grow
CDED
cd-bar-grow500ms·expo-out·engine
Insight Card Cascade
CDED
cd-card-cascade400ms·expo-out·engine
Panel Drilldown Slide
CDED
cd-panel-drilldown500ms·expo-out·engine
Exits
5Fade Out
ALL
as-fadeOut300ms·ease-in·animate.style
Fade Out Up
EDNL
as-fadeOutUp400ms·ease-in·animate.style
Fade Out Down
ED
as-fadeOutDown400ms·ease-in·animate.style
Zoom Out
CD
as-zoomOut400ms·ease-in·animate.style
Fade Out
CDEDNL
fade-out300ms·ease-in·engine
Attention
6Element Spotlight
NL
nl-spotlight2000ms·ease-out·engine
Positioned Tooltip
NL
nl-tooltip2000ms·ease-out·engine
Pulse
ALL
as-pulse1000ms·ease-in-out·animate.style
Head Shake
NL
as-headShake1000ms·ease-in-out·animate.style
Tada
NL
as-tada1000ms·ease-in-out·animate.style
Camera Shake
CD
ct-camera-shake600ms·ease-out·research
Reveals
28Folder Badge Stagger
CD
cd-folder-revealconfigurable·expo-out·engine
Self-Drawing Checkmarks
CD
cd-draw-checks200ms·expo-out·engine
|
|
|
Batch Typewriter
ED
ed-all-typewriters500ms·linear·engine
Iris Open (Circle)
CD
ct-iris-open800ms·ease-out·research
Horizontal Wipe
CD
ct-wipe-reveal600ms·ease-out·research
Diamond Reveal
CD
ct-diamond-reveal700ms·ease-out·research
Animatic
Text Clip-Path Sweep
CDED
ct-text-sweep800ms·expo-out·research
Staggered Bars Reveal
CD
ct-bars-reveal1200ms·steps·research
Gradient Mask Reveal
CDED
ct-soft-reveal1200ms·ease-out·research
Blueprint Grid Draw
CD
ct-blueprint-draw2000ms·ease-out·research
Complex SVG Path Draw
CDED
ct-complex-drawvariable·ease-out·research
Handwriting Path Draw
CDED
ct-handwriting-drawvariable·ease-out·research
Suggestion Chip Stack
EDCD
bk-suggestion-chip-stagger150ms·expo-out·breakdown
Data Table Row Reveal
EDNL
bk-table-row-stagger80ms·ease-out·breakdown
Bar Chart Grow
CDED
bk-bar-grow500ms·expo-out·breakdown
Insight Card Cascade
CDED
bk-insight-card-cascade400ms·expo-out·breakdown
Distance-Based Stagger
ALL
bk-distance-staggervariable·ease-out·breakdown
Grid Flip Cascade
ED
bk-grid-flip-cascade80ms·ease-out·breakdown
Arc Stagger Entrance
CD
bk-arc-cascade80ms·expo-out·breakdown
Bidirectional Stagger
ALL
bk-bidirectional-staggervariable·expo-out·breakdown
Content Line Stagger
CDED
bk-content-line-stagger100ms·ease-out·breakdown
Completion Card Stagger
NL
nl-completion-stagger80ms·ease-out·breakdown
List Row Stagger
NL
nl-list-row-stagger70ms·ease-out·breakdown
Staggered Card Entrance
NL
nl-staggered-card-entrance100ms·ease-out·breakdown
G
M
A
Provider Button Stagger
NL
nl-provider-button-stagger120ms·ease-out·breakdown
Segmented Code Input
NL
nl-segmented-code-input60ms·ease-out·breakdown
Grid Reveal
MO
mo-grid-reveal80ms·expo-out·engine
Split-Screen Reveal
MO
mo-split-screen200ms·expo-out·engine
Continuous
28Multi-File Progress
CD
cd-progress-animationphase·linear·engine
Design
Content Cycling
ED
ed-content-cycle2800ms·ease-in-out·engine
Zero-Gravity Float
CD
ct-float6000ms·ease-in-out·research
Grid Wave Propagation
CD
bk-grid-wave2000ms·ease-in-out·breakdown
Ambient Glow Pulse
CD
ct-glow-pulse4000ms·ease-in-out·research
Animatic
Variable Font Breathe
CD
ct-font-breathe3000ms·ease-in-out·research
Sparse Grid Breathing
ALL
bk-sparse-breathe4000ms·ease-in-out·breakdown
Light Dot Breathing
NL
bk-nl-dot-breathe4500ms·ease-in-out·breakdown
Flow Field Vortex
CD
bk-flow-fieldcontinuous·linear·breakdown
Handheld Drift
CD
ct-camera-handheldcontinuous·linear·research
Camera Drift
ED
ed-camera-driftcontinuous·ease-in-out·research
Ambient Camera Drift
CDED
ct-ambient-drift12000ms·ease-in-out·research
Element Float
CD
ct-element-float6000ms·ease-in-out·research
Scene Breathing
CDED
ct-scene-breathe8000ms·ease-in-out·research
Slow Push-In
CDED
ct-slow-push6000ms·ease-in-out·research
Editorial Scene Breathing
ED
ed-scene-breathe10000ms·ease-in-out·research
Neutral Scene Breathing
NL
nl-scene-breathe12000ms·ease-in-out·research
Aurora Multi-Gradient
CD
ct-aurora-gradient12000ms·linear·research
Color Stop Cycling
CDED
ct-color-cycle6000ms·linear·research
Gradient Angle Shift
CDED
ct-gradient-shift8000ms·linear·research
Liquid Conic Border
CD
ct-liquid-border4000ms·linear·research
Animated Noise Overlay
CDED
ct-noise-overlaycontinuous·linear·research
Film Grain
CDED
ct-film-grain200ms·steps·research
Blob Shape Morph
CD
bk-blob-morph8000ms·ease-in-out·breakdown
Concentric Ring Pulse
CD
bk-concentric-pulse3000ms·ease-in-out·breakdown
Displacement Warp Pulse
CD
bk-displacement-warp4000ms·ease-in-out·breakdown
SVG Grain Texture
CDED
bk-grain-texturecontinuous·steps·breakdown
Metaball Gooey Merge
CD
bk-metaball-gooeycontinuous·linear·breakdown
Content
90
Animated Number Count
EDNL
ed-count-up800ms·ease-out·engine
Step Indicator Update
NL
nl-step-progress450ms·ease-out·engine
Progress Dot Indicator
NL
nl-progress-dots150ms/dot·ease-out·breakdown
Fast
Word Carousel
ED
ct-word-carousel8000ms·ease-in-out·research
Image Breathing
ED
bk-text-image-split3200ms·ease-in-out·breakdown
AI Response Word Streaming
EDNL
bk-ai-response-stream120ms/chunk·ease-out·breakdown
Scroll-Triggered Typewriter
ED
bk-scroll-trigger-typewriter50ms/char·linear·breakdown
Metric Card Count-Up
EDNL
bk-stat-card-count-up200ms·expo-out·breakdown
Text Parallax Stack
CD
bk-text-parallax-stack3000ms·linear·breakdown
Interactions
10Tab A
Tab B
Tab Highlight + Crossfade
ED
ed-tab-switchtransition·ease-out·engine
Simulated Cursor
NL
nl-cursor-to600ms·ease-out·engine
Spring Card Hover
ALL
bk-spring-card-hover200ms·spring·breakdown
Card Selection State
NL
nl-card-select150ms·ease-out·breakdown
Radio Card Selection
NL
nl-radio-card-select150ms·ease-out·breakdown
Tag A
Tag B
Tag Pill Selection
NL
nl-tag-pill-select150ms·ease-out·breakdown
Submit
Button Activation
NL
nl-button-activate150ms·ease-out·breakdown
Save
Button Loading Swap
NL
nl-button-loading-swap200ms·ease-out·breakdown
Inline Expand
NL
nl-inline-expand300ms·ease-out·breakdown
Timeline Range Select
CD
bk-timeline-range-select1200ms·ease-in-out·breakdown
Transitions
29Cinematic Phase Change
CD
cd-phase-transitionmulti·multi·engine
Editorial Phase Change
ED
ed-phase-transitionmulti·multi·engine
Neutral Phase Change
NL
nl-phase-transitionmulti·multi·engine
Hard Cut
MO
mo-hard-cut0ms·linear·engine
Whip-Wipe Transition
MO
mo-whip-wipe250ms·ease-in·engine
Camera Dolly Forward
CD
ct-camera-dolly1400ms·expo-out·research
Camera Pan
CD
ct-camera-pan1200ms·expo-out·research
Camera Tilt Reveal
CD
ct-camera-tilt1200ms·expo-out·research
Camera Orbit
CD
ct-camera-orbit1200ms·expo-out·research
Scatter & Reconverge
CD
bk-bars-scatter3400ms·expo-out·breakdown
Icon-to-Layout Morph
CD
bk-icon-to-layout1000ms·expo-out·breakdown
Wizard Step Crossfade
NL
nl-wizard-step-crossfade350ms·ease-out·breakdown
Phase Content Crossfade
NL
nl-phase-crossfade300ms·ease-out·breakdown
Loading Gate
NL
nl-loading-gate575ms·ease-out·breakdown
App Dissolve
NL
nl-app-materialize600ms·ease-out·breakdown
Camera Truck
CD
ct-camera-truck1200ms·expo-out·research
Camera Pedestal
CD
ct-camera-pedestal1200ms·expo-out·research
Camera Crane
CD
ct-camera-crane1400ms·expo-out·research
Camera Arc
CD
ct-camera-arc1200ms·expo-out·research
Camera Push-In
CD
ct-camera-push-in1200ms·expo-out·research
Camera Pull-Out
CD
ct-camera-pull-out1200ms·expo-out·research
Rack Focus
CD
ct-camera-rack-focus800ms·expo-out·research
Subtle Push-In
ED
ed-camera-push-in2000ms·ease-out·research
Single-to-Dual Pane Split
ED
bk-chat-to-split-pane600ms·expo-out·breakdown
Panel Interior Crossfade
EDNL
bk-panel-content-swap500ms·ease-out·breakdown
Particle Dissolve
CD
bk-particle-dissolve2000ms·expo-out·breakdown
Tagline Crossfade Sequence
CDED
bk-tagline-crossfade400ms·ease-out·breakdown
Panel Drilldown Slide
CDED
bk-panel-drilldown500ms·expo-out·breakdown
Montage Phase Change
MO
mo-phase-transitionper-phase·multi·engine