R
riaz37
/
remotion-ui
/
ui
Files
Code
Info
animated-noise-grain
Film grain overlay
arrow-annotate
Hand-drawn arrow pointing at a target
audio-pulse
Audio-reactive pulse rings
audio-reactive-scale
Scales any child by per-frame audio amplitude
audio-scrubber
Waveform with traveling playhead and time labels
audiogram-bars
Audio-reactive spectrum bar visualization
aurora-bg
Drifting light ribbons
badge-stamp
Stamp/seal impact with rotation settle
bar-chart-race
Ranked bars reorder over time
beat-pulse-grid
Grid cells pulsing on detected beats
blob-morph
Organic blob continuously morphing
blur-focus-in
Text fades from heavy blur into sharp focus
blur-in
Resolve out of a defocus — blur clears before the move lands
blur-reveal
Cut where the outgoing scene softens away and the incoming one resolves out of blur
bubble-chart-pack
Circle-packed values settling into place
candlestick-chart
OHLC financial series
caption-emoji-beat
Emoji punctuation landing on beats
caption-highlight
TikTok-style word-by-word caption highlight
caustics-bg
Underwater light caustics
chromatic-aberration-wipe
Slide that pulls the colour channels apart at its fastest point and recombines them on landing
comparison-bars
Two-series before/after with delta callout
confetti-burst
Frame-driven confetti burst overlay
connector-lines
Narrowed: primitive that draws edges between anchored elements
counter
Animated number with grouping, decimals, odometer digit roll and a reserved width
cursor-path
Cursor travelling a path with drawn trail and click ripples
dashed-path-travel
Narrowed: any element traveling any path with a dashed trail
depth-of-field-blur
Rack focus between layers
directional-wipe
Soft-edged wipe that uncovers the next scene without exposing the background
donut-chart
Multi-segment donut with labels
dynamic-grid
Subtle drifting dot and line grid background
fade-in
Opacity-only entrance, with an exit that lands on the end of its sequence
fade-out
Held exit that accelerates away, timed to the last frame of its sequence by default
frosted-glass-wipe
A pane of frosted glass crosses the frame and leaves the next scene behind it
funnel-chart
Stage bars narrowing with drop-off percentages
gantt-timeline
Date-scaled schedule bars
gauge-dial
Needle sweeps to target
globe-arc
Arcs between points on a globe
glow-pulse
Rhythmic glow for CTAs and live indicators
grid-pixelate-wipe
Reveal where the next scene arrives one grid cell at a time
handwriting-text
Takes a string and strokes it on
heatmap-grid
Cell grid filling by intensity, contribution-graph style
infinite-marquee
Endlessly scrolling horizontal text band
karaoke-captions
Active-word karaoke caption styling
light-rays
Volumetric god rays drifting across the stage
light-sweep-text
Light gradient sweeps across dim text
line-chart-draw
SVG line chart that draws itself on
liquid-text-morph
Letterforms morphing between two words
map-canvas
Deterministic MapLibre map mount
map-heat-overlay
Density overlay fading in over the basemap
map-markers
GeoJSON circle and label markers on a map
map-route
Animated GeoJSON route line on a map
marker-highlight
Highlighter stroke swept word by word across a phrase, with marker, knockout, underline and box variants
masked-slide-reveal
Words slide up through a horizontal mask
matrix-decode
Scramble resolves left-to-right into target text
mesh-gradient-bg
Living mesh gradient blob background
motion-trail
Echo trails behind a moving element
multi-device-lineup
Phone + tablet + laptop showing one responsive design
neon-flicker-text
Neon sign flicker and settle
orbit-motion
Element orbiting a center point
parallax-layers
Depth-offset layers on one driver
particle-field
Ambient drifting particles with depth
path-draw
SVG stroke reveal with auto-fit framing, multi-path stagger and a drawing head
perspective-marquee
Marquee tilted in 3D with depth fade
pie-slice-reveal
Slices sweep in sequentially
progress-bar
Inline progress bar with determinate and indeterminate modes, segments and a value readout
radar-chart
Multi-axis spider chart drawing its polygon
rgb-glitch-text
Signal-lock RGB glitch text with channel splits, slices, and scanlines
rotate-in
Swing into place in plane or hinged in depth on the x/y axis
scale-in
Grow into place from just under full size, with an optional spring and exit
scanline-crt
CRT scanlines and curvature overlay
scatter-plot-pop
Points pop in on stagger, optional trend line
scramble-text
Random-glyph scramble resolving per character
shake-emphasis
Short impact shake
shape-morph
Path interpolation between two shapes
simulated-cursor
Frame-timed cursor with press, click ripples, hit targets and labels
skew-in
Skew + translate, editorial feel
slide-left
Slide in from either side, with an optional mask reveal and automatic exit
slide-up
Rise into place, with an optional mask reveal and automatic exit
slot-roll
Characters roll like a slot reel into place
sparkline-row
Compact trend lines that read at small sizes
spatial-push
Push where both scenes travel locked edge to edge across the frame
speaker-label-captions
Narrowed: multi-speaker caption track with name tags and color coding
split-text-chars
Split text into chars, words or lines and stagger them in
spring-in
Spring-driven scale and rise, with snappy, smooth and bouncy presets
squash-stretch
The animation principle as a primitive
srt-caption-track
Renders a caption track straight from an SRT or WebVTT file
stacked-area-chart
Multiple series stacking as they draw on
stagger-children
Offset children onto their own sequences, in forward, reverse, centre or edge order, in and out
staggered-fade-up
Words rise with cascading fade-up stagger
strikethrough-replace
Strikes out one phrase and puts another in its place, on a three-beat correction timeline
stroke-to-fill-text
Outline text filling solid
subtitle-translate
Dual-language stacked subtitles
svg-mask-reveal
Arbitrary SVG shape as a reveal mask
text-mask-video
Video or gradient showing through letterforms
topographic-lines-bg
Contour lines drifting
tracking-in
Letter-spacing collapses with spring snap
transcript-scroll
Full readable transcript scrolling with the active line marked
transition-blinds
Staggered slats sweeping open to reveal the next scene
transition-card-flip
Whole-frame 3D flip that hands off on backface culling
transition-circle-reveal
Circular mask that opens from any point onto the next scene
transition-clock-wipe
Clock sweep that reads the composition size itself
transition-fade
Crossfade between scenes, or dip the cut through a colour
transition-light-leak
Film flare overlay that peaks on the cut and hides the seam under it
transition-liquid-warp
Liquid displacement warp that stirs one scene into the next
transition-morph-shape
Reveal through a shape that morphs as it grows across the frame
transition-slide
Slide transition helper for TransitionSeries
transition-whip-pan
Fast pan with directional motion blur along the travel axis
transition-wipe
Wipe transition helper for TransitionSeries
treemap-blocks
Nested rectangles sized by value
typewriter
Typewriter reveal with rhythm, pauses, looping, and a caret that only blinks at rest
variable-font-morph
Animates weight/width axes of a variable font
voice-note-bubble
Chat-style audio message with waveform and playhead
vu-meter
Segmented level meter with peak hold
waterfall-chart
Cumulative bridge with positive/negative steps
wave-text
Per-character sine displacement
waveform-bars-radial
Circular bars around a center element
waveform-line
Audio waveform line visualization
word-pop-captions
Narrowed: one word at a time, alone on frame
zoom-through
Camera push-through: one scene drives past the lens, the next lands out of the same move
Select a component to view its code
Click on any item in the sidebar to get started
Select a component to view its information
animated-noise-grain
Film grain overlay
arrow-annotate
Hand-drawn arrow pointing at a target
audio-pulse
Audio-reactive pulse rings
audio-reactive-scale
Scales any child by per-frame audio amplitude
audio-scrubber
Waveform with traveling playhead and time labels
audiogram-bars
Audio-reactive spectrum bar visualization
aurora-bg
Drifting light ribbons
badge-stamp
Stamp/seal impact with rotation settle
bar-chart-race
Ranked bars reorder over time
beat-pulse-grid
Grid cells pulsing on detected beats
blob-morph
Organic blob continuously morphing
blur-focus-in
Text fades from heavy blur into sharp focus
blur-in
Resolve out of a defocus — blur clears before the move lands
blur-reveal
Cut where the outgoing scene softens away and the incoming one resolves out of blur
bubble-chart-pack
Circle-packed values settling into place
candlestick-chart
OHLC financial series
caption-emoji-beat
Emoji punctuation landing on beats
caption-highlight
TikTok-style word-by-word caption highlight
caustics-bg
Underwater light caustics
chromatic-aberration-wipe
Slide that pulls the colour channels apart at its fastest point and recombines them on landing
comparison-bars
Two-series before/after with delta callout
confetti-burst
Frame-driven confetti burst overlay
connector-lines
Narrowed: primitive that draws edges between anchored elements
counter
Animated number with grouping, decimals, odometer digit roll and a reserved width
cursor-path
Cursor travelling a path with drawn trail and click ripples
dashed-path-travel
Narrowed: any element traveling any path with a dashed trail
depth-of-field-blur
Rack focus between layers
directional-wipe
Soft-edged wipe that uncovers the next scene without exposing the background
donut-chart
Multi-segment donut with labels
dynamic-grid
Subtle drifting dot and line grid background
fade-in
Opacity-only entrance, with an exit that lands on the end of its sequence
fade-out
Held exit that accelerates away, timed to the last frame of its sequence by default
frosted-glass-wipe
A pane of frosted glass crosses the frame and leaves the next scene behind it
funnel-chart
Stage bars narrowing with drop-off percentages
gantt-timeline
Date-scaled schedule bars
gauge-dial
Needle sweeps to target
globe-arc
Arcs between points on a globe
glow-pulse
Rhythmic glow for CTAs and live indicators
grid-pixelate-wipe
Reveal where the next scene arrives one grid cell at a time
handwriting-text
Takes a string and strokes it on
heatmap-grid
Cell grid filling by intensity, contribution-graph style
infinite-marquee
Endlessly scrolling horizontal text band
karaoke-captions
Active-word karaoke caption styling
light-rays
Volumetric god rays drifting across the stage
light-sweep-text
Light gradient sweeps across dim text
line-chart-draw
SVG line chart that draws itself on
liquid-text-morph
Letterforms morphing between two words
map-canvas
Deterministic MapLibre map mount
map-heat-overlay
Density overlay fading in over the basemap
map-markers
GeoJSON circle and label markers on a map
map-route
Animated GeoJSON route line on a map
marker-highlight
Highlighter stroke swept word by word across a phrase, with marker, knockout, underline and box variants
masked-slide-reveal
Words slide up through a horizontal mask
matrix-decode
Scramble resolves left-to-right into target text
mesh-gradient-bg
Living mesh gradient blob background
motion-trail
Echo trails behind a moving element
multi-device-lineup
Phone + tablet + laptop showing one responsive design
neon-flicker-text
Neon sign flicker and settle
orbit-motion
Element orbiting a center point
parallax-layers
Depth-offset layers on one driver
particle-field
Ambient drifting particles with depth
path-draw
SVG stroke reveal with auto-fit framing, multi-path stagger and a drawing head
perspective-marquee
Marquee tilted in 3D with depth fade
pie-slice-reveal
Slices sweep in sequentially
progress-bar
Inline progress bar with determinate and indeterminate modes, segments and a value readout
radar-chart
Multi-axis spider chart drawing its polygon
rgb-glitch-text
Signal-lock RGB glitch text with channel splits, slices, and scanlines
rotate-in
Swing into place in plane or hinged in depth on the x/y axis
scale-in
Grow into place from just under full size, with an optional spring and exit
scanline-crt
CRT scanlines and curvature overlay
scatter-plot-pop
Points pop in on stagger, optional trend line
scramble-text
Random-glyph scramble resolving per character
shake-emphasis
Short impact shake
shape-morph
Path interpolation between two shapes
simulated-cursor
Frame-timed cursor with press, click ripples, hit targets and labels
skew-in
Skew + translate, editorial feel
slide-left
Slide in from either side, with an optional mask reveal and automatic exit
slide-up
Rise into place, with an optional mask reveal and automatic exit
slot-roll
Characters roll like a slot reel into place
sparkline-row
Compact trend lines that read at small sizes
spatial-push
Push where both scenes travel locked edge to edge across the frame
speaker-label-captions
Narrowed: multi-speaker caption track with name tags and color coding
split-text-chars
Split text into chars, words or lines and stagger them in
spring-in
Spring-driven scale and rise, with snappy, smooth and bouncy presets
squash-stretch
The animation principle as a primitive
srt-caption-track
Renders a caption track straight from an SRT or WebVTT file
stacked-area-chart
Multiple series stacking as they draw on
stagger-children
Offset children onto their own sequences, in forward, reverse, centre or edge order, in and out
staggered-fade-up
Words rise with cascading fade-up stagger
strikethrough-replace
Strikes out one phrase and puts another in its place, on a three-beat correction timeline
stroke-to-fill-text
Outline text filling solid
subtitle-translate
Dual-language stacked subtitles
svg-mask-reveal
Arbitrary SVG shape as a reveal mask
text-mask-video
Video or gradient showing through letterforms
topographic-lines-bg
Contour lines drifting
tracking-in
Letter-spacing collapses with spring snap
transcript-scroll
Full readable transcript scrolling with the active line marked
transition-blinds
Staggered slats sweeping open to reveal the next scene
transition-card-flip
Whole-frame 3D flip that hands off on backface culling
transition-circle-reveal
Circular mask that opens from any point onto the next scene
transition-clock-wipe
Clock sweep that reads the composition size itself
transition-fade
Crossfade between scenes, or dip the cut through a colour
transition-light-leak
Film flare overlay that peaks on the cut and hides the seam under it
transition-liquid-warp
Liquid displacement warp that stirs one scene into the next
transition-morph-shape
Reveal through a shape that morphs as it grows across the frame
transition-slide
Slide transition helper for TransitionSeries
transition-whip-pan
Fast pan with directional motion blur along the travel axis
transition-wipe
Wipe transition helper for TransitionSeries
treemap-blocks
Nested rectangles sized by value
typewriter
Typewriter reveal with rhythm, pauses, looping, and a caret that only blinks at rest
variable-font-morph
Animates weight/width axes of a variable font
voice-note-bubble
Chat-style audio message with waveform and playhead
vu-meter
Segmented level meter with peak hold
waterfall-chart
Cumulative bridge with positive/negative steps
wave-text
Per-character sine displacement
waveform-bars-radial
Circular bars around a center element
waveform-line
Audio waveform line visualization
word-pop-captions
Narrowed: one word at a time, alone on frame
zoom-through
Camera push-through: one scene drives past the lens, the next lands out of the same move
Select a component to view its code
Click on any item in the sidebar to get started
Select a component to view its information