videobuilder capabilities

923

Every capability in one film, re-made for each release. Latest: v0.1.115 ยท vertical cut

Animation principles

Classic principles

Anticipation
Animation principles / Classic principles · anticipation

Just before a big move, the object eases a little the opposite way, as if gathering itself, then springs off fast in the real direction.

Appeal
Animation principles / Classic principles · appeal

Motion given enough character, through clear shapes, lively timing and a hint of emotion, that the viewer enjoys watching it and warms to whatever is moving.

Arcs
Animation principles / Classic principles · arcs

Movement from one point to another follows a gentle curve instead of a straight line, which makes it feel natural and alive rather than mechanical.

Exaggeration
Animation principles / Classic principles · exaggeration

Every part of a move is pushed well past what is realistic, a deeper crouch, a bigger leap, a harder squash, so the action reads instantly and with more energy.

Follow Through
Animation principles / Classic principles · follow-through

When a moving thing comes to a stop, its loose bits (a tail, hair, an antenna) carry on past it, swing back and settle a beat later.

Overlapping Action
Animation principles / Classic principles · overlapping-action

The parts of one moving thing travel out of step: the main body stops cleanly while the looser parts attached to it trail behind, swing past and settle a moment later.

Secondary Action
Animation principles / Classic principles · secondary-action

A smaller movement layered over the main one, such as a wave while walking, that adds personality without stopping or competing with the main movement.

Slow In and Slow Out
Animation principles / Classic principles · slow-in-and-slow-out

A move that gathers speed gently from rest and gently sheds it again before stopping, so most of its frames sit near the two ends and few in the fast middle.

Solid Drawing
Animation principles / Classic principles · solid-drawing

An object keeps the same size, proportions and perspective as it turns and travels, so every angle shows one solid thing with real weight and depth.

Squash and Stretch
Animation principles / Classic principles · squash-and-stretch

A moving body grows long and thin along its path while it travels fast and goes short and wide when it lands, trading width for height so it seems to hold the same amount of stuff.

Staging
Animation principles / Classic principles · staging

The frame is arranged so one subject clearly owns it, with everything else pushed back in brightness, size and placement, so the eye goes straight to the action that matters.

Timing
Animation principles / Classic principles · timing

Choosing how many frames a move lasts so its speed tells the viewer how heavy, light, urgent or relaxed the thing moving is.

Cycles & loops

Breathing Idle
Animation principles / Cycles & loops · breathing-idle

An element waiting on screen gently grows and shrinks back in a slow, even rhythm, as if quietly breathing while nothing else happens.

Flipbook Sprite Animation
Animation principles / Cycles & loops · flipbook-sprite-animation

A short series of separate drawings is swapped in one spot at a steady rate, so a subject moves the way pages do when a flipbook is thumbed.

Hop Cycle
Animation principles / Cycles & loops · hop-cycle

A looping hop in place: the body crouches and squashes, springs up stretched, rounds out at the top, then falls and squashes on landing to start the next hop.

Idle Float Bob
Animation principles / Cycles & loops · idle-float-bob

A resting element drifts smoothly up and down in an endless slow wave, as if it were hovering or floating on water.

Ping-Pong Loop
Animation principles / Cycles & loops · ping-pong-loop

An animation that plays through to its end, then runs the same motion in reverse back to its start, over and over, so the loop never jumps.

Run Cycle
Animation principles / Cycles & loops · run-cycle

A short looping set of poses in which a figure pushes off, flies with both feet off the ground, lands and pushes off again, repeated so it seems to run without stopping.

Seamless Loop
Animation principles / Cycles & loops · seamless-loop

A clip whose motion runs in whole cycles so its last frame flows straight back into its first, letting it play on repeat with no visible jump.

Walk Cycle
Animation principles / Cycles & loops · walk-cycle

A character steps through one full stride of legs and swinging arms that repeats seamlessly, so it keeps walking for as long as the loop runs.

Easing

Bounce Ease In
Animation principles / Easing · bounce-ease-in

A move that winds up with a few small hops, each higher than the last, before springing off the final one all the way to its target.

Bounce Ease Out
Animation principles / Easing · bounce-ease-out

A move that hits its target and bounces back off it in a few quickly shrinking hops, like a ball dropped on a hard floor.

Custom Cubic-Bezier Easing
Animation principles / Easing · custom-cubic-bezier-easing

A move whose speed follows a curve you shape yourself by dragging two control handles, so it can lag, rush, pull back or overshoot exactly as you want.

Ease In Back
Animation principles / Easing · ease-in-back

A move that first backs off a little in the opposite direction, then speeds up toward its target and arrives at full speed.

Ease In Circ
Animation principles / Easing · ease-in-circ

A move that creeps away from rest and then gathers speed sharply along a quarter-circle curve, so it is going fastest at the very end.

Ease In Cubic
Animation principles / Easing · ease-in-cubic

A move that creeps away from its start and keeps accelerating, so it is going fastest at the moment it arrives.

Ease In Expo
Animation principles / Easing · ease-in-expo

A move that barely creeps away from its start, then gathers speed sharply and is travelling at full tilt when it reaches the end.

Ease In Quad
Animation principles / Easing · ease-in-quad

A move that begins at a standstill and speeds up steadily, reaching its fastest at the very moment it stops.

Ease In Sine
Animation principles / Easing · ease-in-sine

A move that sets off softly from rest and picks up speed smoothly, following the gentle rise of a sine curve until it reaches full pace at the end.

Ease In-Out Back
Animation principles / Easing · ease-in-out-back

A move that first pulls back a little away from where it is going, swings across, shoots slightly past the target and then settles back onto it.

Ease In-Out Cubic
Animation principles / Easing · ease-in-out-cubic

A move that pulls away from rest gently, is quickest at its halfway point, then slows just as gently into its stop.

Ease In-Out Expo
Animation principles / Easing · ease-in-out-expo

A move that creeps off its start, whips through the middle almost at once, then creeps into its end, so it feels like a snap between two resting states.

Ease In-Out Quad
Animation principles / Easing · ease-in-out-quad

A move that picks up speed gently from rest, is quickest at its midpoint, and slows just as gently into its stop, with the speed changing at a steady rate both ways.

Ease In-Out Quint
Animation principles / Easing · ease-in-out-quint

A move that barely stirs at first, sweeps almost the whole way in a quick burst through the middle, then crawls to a stop, following a fifth-power curve.

Ease In-Out Sine
Animation principles / Easing · ease-in-out-sine

A move that drifts off gently, is quickest right at its midpoint, and drifts to a stop just as gently, its speed rising and falling like a smooth wave.

Ease Out Back
Animation principles / Easing · ease-out-back

A move that starts fast, runs a little past its target, then eases back to rest on it.

Ease Out Circ
Animation principles / Easing · ease-out-circ

A move that launches almost instantly at top speed, loses most of that speed right away, and then coasts slowly and smoothly into its final spot.

Ease Out Cubic
Animation principles / Easing · ease-out-cubic

A move that leaves quickly and then slows down steadily, coming to a soft stop exactly on its target without overshooting.

Ease Out Expo
Animation principles / Easing · ease-out-expo

A move that leaves almost at full speed and then brakes harder and harder, creeping the last stretch so it seems to glide gently into place.

Ease Out Quad
Animation principles / Easing · ease-out-quad

A move that sets off at its quickest and slows down at an even rate, gently coasting to a stop on its target.

Ease Out Quart
Animation principles / Easing · ease-out-quart

A move that sets off at full speed and then slows down steeply, gliding the last stretch into place without overshooting.

Ease Out Sine
Animation principles / Easing · ease-out-sine

A move that sets off at its quickest and then slows softly and evenly until it comes to rest on its target, following a quarter of a sine wave.

Elastic Ease In
Animation principles / Easing · elastic-ease-in

A move that first jiggles back and forth around its starting point in ever wider swings, then breaks loose and shoots to its target.

Elastic Ease Out
Animation principles / Easing · elastic-ease-out

A move that shoots past its target and swings back and forth across it, each swing smaller than the last, until it settles like a plucked elastic.

Linear Easing
Animation principles / Easing · linear-easing

A move that keeps exactly the same speed from the first frame to the last, with no speeding up at the start and no slowing down at the end.

Steps Easing
Animation principles / Easing · steps-easing

A move that freezes and then snaps forward in a handful of equal jumps, ticking toward its target like a clock hand instead of gliding.

Physics

Air Drag
Animation principles / Physics · air-drag

A falling object picks up speed quickly at first, then the push of the air grows until it matches gravity and the object settles into a steady top speed.

Ball Bounce
Animation principles / Physics · ball-bounce

A ball falls under gravity and rebounds from the floor in ever lower, ever shorter hops, flattening on each impact and stretching as it drops, until it comes to rest.

Chain Follow-Through
Animation principles / Physics · chain-follow-through

A string of joined links hangs from a point that moves, and each link trails the one above it, so the whole chain whips along late and keeps swinging after the point has stopped.

Critically Damped Spring
Animation principles / Physics · critically-damped-spring

A spring-driven move that gets to its target as quickly as it can and settles there without ever going past it or wobbling.

Friction Deceleration
Animation principles / Physics · friction-deceleration

Something released at speed sheds a constant share of that speed each moment, so it brakes sharply at first and then drifts slower and slower into a soft stop.

Gravity Drop
Animation principles / Physics · gravity-drop

Something is let go and falls straight down, starting slowly and picking up speed steadily, as if gravity were pulling it.

Impact
Animation principles / Physics · impact

One object strikes another: the striker stops or rebounds at once, and the one it hit is knocked back, squashes against the blow and wobbles to rest.

Inertia
Animation principles / Physics · inertia

A heavy object trails behind whatever drives it, building up speed slowly and carrying on in the same direction for a moment after the drive turns around.

Jiggle
Animation principles / Physics · jiggle

An object shivers rapidly back and forth around where it sits, the shake fading out within a fraction of a second.

Magnetic Snap
Animation principles / Physics · magnetic-snap

Something moving loosely drifts close to a target, gets tugged toward it, then jumps the last stretch and locks on with a small springy wobble.

Orbit
Animation principles / Physics · orbit

An object travels round and round a central point on a fixed loop, passing in front of the centre and then behind it.

Oscillation
Animation principles / Physics · oscillation

Something swings to and fro around a resting point in a smooth, regular rhythm, like a pendulum or a weight on a spring.

Overdamped Spring
Animation principles / Physics · overdamped-spring

A spring so heavily damped that it drifts toward its target and slowly settles there, never passing it or bouncing back.

Pendulum Swing
Animation principles / Physics · pendulum-swing

A weight on a stiff arm rocks side to side about a fixed point above it, hanging still for an instant at each end and rushing fastest through the bottom.

Perlin Noise Drift
Animation principles / Physics · perlin-noise-drift

Objects float around their resting spot along smooth, never-repeating wandering paths driven by noise, as if carried by a gentle current.

Projectile Arc
Animation principles / Physics · projectile-arc

An object tossed across the frame rises, slows and hangs at the top, then drops faster and faster, tracing a parabola from where it left to where it lands.

Recoil
Animation principles / Physics · recoil

At the moment it fires or takes a hit, the object snaps backwards a short way, then glides back to its starting spot.

Rubber Band Snap
Animation principles / Physics · rubber-band-snap

Something tied to a fixed point is dragged away against a tightening band, then let go, so it whips back, shoots past its resting place and wobbles to a stop.

Settle
Animation principles / Physics · settle

After arriving, an object swings past its resting spot and back a few times, each swing smaller than the last, until it comes to a stop.

Shake
Animation principles / Physics · shake

The view or an object jolts about in small random jumps that die away quickly, selling the force of a hit.

Soft Body Jelly
Animation principles / Physics · soft-body-jelly

A shape whose outline is a ring of points held together by springs, so it squashes, bulges and wobbles on impact before settling back like a lump of jelly.

Spring Motion
Animation principles / Physics · spring-motion

Movement driven by a simulated spring, so a thing shoots toward its target, runs past it and wobbles back and forth in shrinking swings until it settles.

Underdamped Spring
Animation principles / Physics · underdamped-spring

A move driven by a loosely damped spring, so it shoots past its target and swings back and forth around it in shrinking wobbles until it comes to rest.

Wobble
Animation principles / Physics · wobble

After a knock, a shape sways and jiggles back and forth about its base, each swing smaller than the last, until it settles where it started.

Principle sub-capabilities

Delay
Animation principles / Principle sub-capabilities · delay

An element holds still for a set moment and only then begins its move, so the action starts later than its cue.

Hold
Animation principles / Principle sub-capabilities · hold

A move comes to a full stop and the subject stays put on that pose for a beat, letting it register before the next move begins.

Moving Hold
Animation principles / Principle sub-capabilities · moving-hold

Once something has stopped, it keeps up a faint, slow drift and swell so the pause feels alive instead of looking like a paused frame.

Multiples
Animation principles / Principle sub-capabilities · multiples

During a very fast move, several copies of the subject appear in one frame, strung out along its path, so the eye reads speed instead of a jump.

Offset
Animation principles / Principle sub-capabilities · offset

Connected parts make the same move but start it one after another, a beat apart, so each seems to carry its own weight and trail the one ahead.

On Ones, On Twos, On Threes
Animation principles / Principle sub-capabilities · on-ones-on-twos-on-threes

The moving thing gets a new pose every frame, every other frame or every third frame, so the same motion looks fluid, hand-made or deliberately steppy.

Smear Frame
Animation principles / Principle sub-capabilities · smear-frame

During a very quick move, the object is drawn for a frame or two as one long stretched shape spanning where it was and where it is, instead of jumping between the two.

Volume Preservation
Animation principles / Principle sub-capabilities · volume-preservation

A shape that gets thinner as it stretches and wider as it squashes, so its overall size stays the same while its proportions change.

Weight and Mass
Animation principles / Principle sub-capabilities · weight-and-mass

Timing that tells you how heavy something is: a heavy object starts slowly, takes longer, and drifts past its mark before settling, while a light one zips off and stops at once.

Stagger

Center-Out Stagger
Animation principles / Stagger · center-out-stagger

Items in a row or group start their move one after another beginning at the middle, with the timing spreading outward evenly so the outermost items go last.

Eased Stagger
Animation principles / Stagger · eased-stagger

Items in a sequence start one after another with the gaps between their start times following an easing curve, so they rush in close together and then trail out slower.

Edge-In Stagger
Animation principles / Stagger · edge-in-stagger

The two outermost items of a row arrive first, then each next pair inward, so the entrances close in on the middle and the centre lands last.

Grid Diagonal Stagger
Animation principles / Stagger · grid-diagonal-stagger

Tiles in a grid start their animation one after another by row plus column, so the change rolls across the grid as a diagonal front from one corner to the other.

Linear Stagger
Animation principles / Stagger · linear-stagger

A row of items all make the same move, each one setting off a fixed beat after its neighbour, so the motion ripples through the list in order.

Proximity Stagger
Animation principles / Stagger · proximity-stagger

A set of items each starts its move after a delay that grows with its distance from a chosen point, so the change washes outward from there.

Radial Stagger
Animation principles / Stagger · radial-stagger

A group of elements animates one after another in rings spreading out from a single point, each one delayed by how far it sits from that point.

Random Stagger
Animation principles / Stagger · random-stagger

Every item in a group begins its entrance after its own random delay, so the set fills in scattered with no visible order.

Wave Stagger
Animation principles / Stagger · wave-stagger

A row of items each bob up and down on the same repeating cycle, every one starting a beat after the one before it, so a wave seems to roll along the row.

Time remapping

Bullet Time
Animation principles / Time remapping · bullet-time

The action slows to a near standstill at its peak while the camera keeps travelling round it at normal speed, then the action speeds back up.

Frame Interpolation
Animation principles / Time remapping · frame-interpolation

New frames are generated between the existing ones so motion captured at a low frame rate plays back smoothly instead of jumping from pose to pose.

Freeze Frame
Animation principles / Time remapping · freeze-frame

The action stops dead on one instant and the picture stays put for a beat, then everything carries on from exactly where it stopped.

Hitstop
Animation principles / Time remapping · hitstop

At the moment of a hit the motion stops dead for a handful of frames, then picks up again, so the blow feels heavier.

Retiming
Animation principles / Time remapping · retiming

An existing move keeps its exact path but is played back on a new clock, so parts of it run slower, faster or pause while it still ends where it did.

Reverse Playback
Animation principles / Time remapping · reverse-playback

An animation runs forward and then the very same motion plays backwards, so everything retraces its path and ends where it started.

Slow Motion
Animation principles / Time remapping · slow-motion

The action plays at a fraction of its normal speed for a stretch, so a quick moment is drawn out long enough to see every part of it.

Speed Ramp
Animation principles / Time remapping · speed-ramp

A shot whose playback rate glides between speeds, sinking into slow motion and then surging fast again, instead of switching speed in one jump.

Time Remapping
Animation principles / Time remapping · time-remapping

The playback speed of a motion changes as it runs, gliding from normal pace into slow motion and then racing faster than real time, without cutting.

Timing & spacing

Asymmetric easing
Animation principles / Timing & spacing · asymmetric-fast-in-slow-out

A move that gets up to speed in a short burst and then spends most of its time gliding gently to a stop.

Distance-Based Duration
Animation principles / Timing & spacing · distance-based-duration

Each move is given a length of time that grows with how far it travels, so short moves finish quickly and long ones take longer at a similar pace.

Interruptible Motion
Animation principles / Timing & spacing · interruptible-motion

A move that can be cut off or turned around partway through and simply heads for its new destination from wherever it is, keeping its momentum instead of snapping or starting over.

Velocity-Preserving Retarget
Animation principles / Timing & spacing · velocity-preserving-retarget

When something already in motion is given a new destination, it carries its current speed and direction into the new move and curves round to it, with no stop or sharp turn.

Typography

Counting

Decimal counter with formatting
Typography / Counting · decimal-counter-with-formatting

A number ticks up to its total while holding a fixed number of decimals and comma groups, its digits set in equal-width slots so the figure stays steady as it climbs.

Number count-down
Typography / Counting · number-count-down

A big number drops by one at a steady beat, 5, 4, 3, 2, 1, until it reaches zero.

Number count-up
Typography / Counting · number-count-up

A number climbs quickly from zero through every value in between, slowing as it nears its final figure and then holding there.

Credits and crawls

Perspective crawl
Typography / Credits and crawls · perspective-crawl

Lines of text lie on a plane tilted away from the viewer and glide up into the distance, shrinking toward a vanishing point and fading out as they go.

Depth and 3D

3D word cube
Typography / Depth and 3D · three-d-word-cube

Words sit on the sides of a solid cube that turns in perspective, each quarter turn bringing the next word round to face the viewer.

Accordion fold text
Typography / Depth and 3D · accordion-fold-text

A word printed on a strip creased into vertical pleats opens out like a squeezed paper fan until it lies flat and reads in full.

Character 3D flip
Typography / Depth and 3D · character-3d-flip

Letters turn over one at a time about an upright axis, like cards, and land showing their reverse side in a new colour or as a new letter.

Extrusion depth reveal
Typography / Depth and 3D · extrusion-depth-reveal

Flat lettering sprouts a solid side that pushes out behind each glyph until the word reads as a thick three-dimensional block.

Parallax letter layers
Typography / Depth and 3D · parallax-letter-layers

Several copies of the same word are stacked at different depths and slide at different speeds as the view shifts, so the word seems to have layers behind it.

Perspective tunnel type
Typography / Depth and 3D · perspective-tunnel-type

Words line the walls of a corridor that recedes to a vanishing point, sliding towards the camera so it feels like flying through a tunnel made of type.

Text reflection shimmer
Typography / Depth and 3D · text-reflection-shimmer

A word casts an upside-down copy beneath itself that wavers in thin horizontal bands and fades downward, as if mirrored in still water, with a gleam of light drifting across it.

Glitch and distortion

Glitch text
Typography / Glitch and distortion · glitch-text

Type that sits still until it suddenly tears into sideways-shifted slices with red and cyan copies splitting off it, then snaps back to clean.

Neon flicker
Typography / Glitch and distortion · neon-flicker

Glowing tube-lit lettering blinks on and off in an uneven stutter, sometimes only half lit, before it catches and stays steadily bright.

Pixel sort text
Typography / Glitch and distortion · pixel-sort-text

Strips of a word have their pixels reordered from bright to dark, dragging the letters into hard horizontal streaks that then pull back into clean type.

RGB channel split
Typography / Glitch and distortion · rgb-channel-split

A word is pulled apart into its red, green and blue copies, which drift sideways so the letters show rainbow edges before lining back up into white.

Scanline tear
Typography / Glitch and distortion · scanline-tear

Thin horizontal strips of the text suddenly slide sideways out of step with each other, in quick bursts, as though the video signal briefly lost its lock.

Glyph swaps

ASCII glyph density reveal
Typography / Glyph swaps · ascii-glyph-density-reveal

A block of flickering monospaced characters settles so that heavy glyphs gather where the letters are and light ones fade away, until the word stands out in pure type.

Emoji substitution
Typography / Glyph swaps · emoji-substitution

A letter in a word shrinks away and an emoji pops up in its exact spot, so the word still reads with a picture standing in for that letter.

Glyph cycling
Typography / Glyph swaps · glyph-cycling

Each letter of a word ticks through the alphabet in order and comes back round to itself, the cycling rolling across the word one letter after another.

Symbol-to-letter decode
Typography / Glyph swaps · symbol-to-letter-decode

A line of small icons holds the place of a word, and each icon in turn gives way to a letter until the whole word is spelled out.

Layout and poster

Grid reflow shuffle
Typography / Layout and poster · grid-reflow-shuffle

Words laid out one to a grid cell swap places, each sliding along a soft curve to its new cell while staying level and legible.

Kinetic poster layout
Typography / Layout and poster · kinetic-poster-layout

Oversized words arrive one block at a time, each sliding, scaling or turning into its slot, until together they settle into a composed poster.

Stacked line build
Typography / Layout and poster · stacked-line-build

Lines of type drop in one after another, each settling on top of the last, until they pile up into a solid block of words.

Liquid and organic

Liquid melt
Typography / Liquid and organic · liquid-melt

A word goes soft like warm wax: the bottoms of its letters sag and run down past the baseline in tapering drips, and drops fall from the longest ones.

Metaball goo text
Typography / Liquid and organic · metaball-goo-text

Letters behave like drops of thick liquid, so when two drift close their outlines bulge and fuse into one blob, and stretch a neck before snapping apart.

Noise field warp
Typography / Liquid and organic · noise-field-warp

Letters are pushed around by a smooth drifting noise pattern, so their strokes ripple and bulge like type under moving water before settling.

Ripple displacement
Typography / Liquid and organic · ripple-displacement

Rings of motion spread out from one spot through a word, and each one shoves the letter outlines back and forth as it passes, so the type swells and wobbles like a reflection on a pond.

Twirl warp text
Typography / Liquid and organic · twirl-warp-text

A word starts wound into a spiral, its middle turned further than its edges, and untwists until the letters sit straight and readable.

Looping and marquee

Parallax marquee rows
Typography / Looping and marquee · parallax-marquee-rows

Stacked lines of repeating words slide sideways without end, each line heading the opposite way to its neighbour and at its own pace.

Scrolling LED marquee text
Typography / Looping and marquee · scrolling-led-marquee-text

Words built from glowing lamp dots step sideways across a grid of dim lamps, coming in at one edge and running out at the other.

Lyrics and captions

Bouncing ball word marker
Typography / Lyrics and captions · bouncing-ball-word-marker

A little ball jumps in arcs along a line of lyrics, landing on top of each word right when it should be sung.

Karaoke highlight sweep
Typography / Lyrics and captions · karaoke-highlight-sweep

A new colour runs through a line of lyrics from left to right, its edge passing each word as that word is sung.

Kinetic lyric typography
Typography / Lyrics and captions · kinetic-lyric-typography

Song words appear a few at a time, each flying, dropping or slamming in its own way, punching on the beat and leaving before the next line takes its place.

Lyric line crossfade
Typography / Lyrics and captions · lyric-line-crossfade

Song lines appear one at a time in the same spot, and at each change the current line melts away while the next one fades up through it.

Pop-on captions
Typography / Lyrics and captions · pop-on-captions

A whole caption of a line or two cuts onto the screen at once when its cue starts and cuts away when it ends, with no motion on the words themselves.

Word-by-word emphasis
Typography / Lyrics and captions · word-by-word-emphasis

A whole line stays on screen while a highlight colour moves along it one word at a time, marking the word being said.

Masking and clipping

Color fill rise
Typography / Masking and clipping · color-fill-rise

A solid colour climbs up through faint lettering from bottom to top behind a straight level, until every letter is filled in.

Dither reveal
Typography / Masking and clipping · dither-reveal

The words show up as a scattered grid of pixel dots that multiply in a fixed dither order until the letters are fully solid.

Ink spread reveal
Typography / Masking and clipping · ink-spread-reveal

Blots start as specks at a few spots on the word and soak outward with ragged, shifting edges, uncovering the letters until they join and the word is whole.

Pixelation reveal
Typography / Masking and clipping · pixelation-reveal

A title starts as a handful of large flat colour squares and sharpens as the squares get smaller and smaller, until the crisp words are left.

Shutter slat reveal
Typography / Masking and clipping · shutter-slat-reveal

A stack of horizontal slats covering the text turns edge-on one after another, top to bottom, so the words appear through the opening gaps.

Text reveal through shape mask
Typography / Masking and clipping · text-reveal-through-shape-mask

The words can only be seen through a shape, such as a circle sliding across them or opening up wider, so the letters appear wherever that window goes.

Video clipped inside letterforms
Typography / Masking and clipping · video-clipped-inside-letterforms

Big bold letters act as cut-out windows, and a moving picture plays through them while everything outside the letters stays plain background.

Mechanical display

Dot-matrix text
Typography / Mechanical display · dot-matrix-text

Letters are built from a fixed grid of round dots, each either switched on or left dark, and the words appear as the dots light up.

Odometer roll
Typography / Mechanical display · odometer-roll

A number sits on a row of spinning drums and each digit scrolls upward into the next, the left-hand wheels ticking over only when the wheel beside them passes nine.

Seven-segment display
Typography / Mechanical display · seven-segment-display

Numbers are built from seven straight bars per digit, and changing a number simply switches some bars on and others off, like an alarm clock readout.

Split-flap display
Typography / Mechanical display · split-flap-display

Each character sits on a hinged card that flips down through a run of letters, clattering cell by cell until the whole board settles on the message.

Morphing

Letter morph
Typography / Morphing · letter-morph

A letter's outline bends and slides continuously until it has become the shape of a different letter.

Text-to-shape morph
Typography / Morphing · text-to-shape-morph

The outlines of a word stretch and flow, letter by letter, until together they become a single solid shape or icon.

Motion trails

Echo trail type
Typography / Motion trails · echo-trail-type

As a word moves it leaves a line of fading duplicates at the spots it just passed through, which catch up and vanish into it once it stops.

Path and orbit

Arc bend morph
Typography / Path and orbit · arc-bend-morph

A straight line of lettering curls up into an arch, every letter tilting to follow the curve, then flattens out straight again.

Orbiting characters
Typography / Path and orbit · orbiting-characters

Each letter of a word circles a shared centre on its own oval track, the inner ones lapping faster than the outer ones.

Rotating circular text
Typography / Path and orbit · rotating-circular-text

Lettering wrapped around a circle, each glyph standing on the ring, while the whole ring turns steadily about its centre.

Text on a path
Typography / Path and orbit · text-on-a-path

Letters are laid along a curved line, each tilted to follow it, and the words glide along that line so they bend through every turn.

Per-unit reveals

Character blur-in
Typography / Per-unit reveals · character-blur-in

A word appears as soft, faint smudges that sharpen into crisp letters one at a time, the focus travelling along the line.

Character drop
Typography / Per-unit reveals · character-drop

The letters of a word come down from above one after another and land on the line, so the word builds up a character at a time.

Character rise
Typography / Per-unit reveals · character-rise

Letters push up one after another from behind an unseen line at the foot of the text, each sliding into its place until the whole word stands.

Character rotate-in
Typography / Per-unit reveals · character-rotate-in

Letters appear one at a time, each turning upright from a tipped-over angle as it fades in, until the whole word stands straight.

Character scale-in
Typography / Per-unit reveals · character-scale-in

The letters of a word show up one after another, each swelling from a point to full size in its own spot until the whole word stands there.

Character slide-in
Typography / Per-unit reveals · character-slide-in

The letters of a word travel in sideways from one edge, each setting off a beat after its neighbour and easing to a stop in its slot.

Curtain reveal
Typography / Per-unit reveals · curtain-reveal

Two solid panels sitting edge to edge over a line of type slide apart sideways, uncovering the words from the middle out to the ends.

Overshoot bounce-in
Typography / Per-unit reveals · overshoot-bounce-in

Letters pop into a word one at a time, each shooting a little past its spot on the line, springing back and wobbling to a stop.

Per-character fade-in
Typography / Per-unit reveals · per-character-fade-in

A line of text fades in one letter at a time from left to right, each letter starting to appear just after the one before it.

Per-line fade-in
Typography / Per-unit reveals · per-line-fade-in

A block of text appears one line at a time, each line fading up in its place after the line above it has fully arrived.

Per-word fade-in
Typography / Per-unit reveals · per-word-fade-in

Text shows up in reading order one word at a time, each word fading up from nothing shortly after the word before it starts.

Random-order character reveal
Typography / Per-unit reveals · random-order-character-reveal

The letters of a word pop into their final places one by one in a shuffled order, so the text fills in patchily rather than left to right.

Tracking in
Typography / Per-unit reveals · tracking-in

A word appears with its letters spaced wide apart and draws them together to normal spacing as it fades up, easing to a stop.

Tracking out
Typography / Per-unit reveals · tracking-out

The gaps between the letters of a word slowly widen while it holds on screen, so the title drifts outward from its centre.

Wipe reveal
Typography / Per-unit reveals · wipe-reveal

A straight, slightly soft edge slides across the words and they are visible only where it has already passed, so each line is uncovered from one side to the other.

Word flip-in
Typography / Per-unit reveals · word-flip-in

Words appear one at a time, each tilting up from edge-on around a horizontal hinge until it faces the viewer.

Physics and particles

Dissolve to particles
Typography / Physics and particles · dissolve-to-particles

The text crumbles into a cloud of tiny specks along a moving edge, and the specks blow away and fade until the word is gone.

Falling letter rain
Typography / Physics and particles · falling-letter-rain

Scattered letters pour down the screen like a rain shower, accelerating and tumbling as they fall, with bigger near letters passing in front of smaller far ones.

Noise dissolve
Typography / Physics and particles · noise-dissolve

Text fills in or eats away in irregular cloudy patches, as if a noise pattern were being thresholded over it, often with a lit edge along the moving border.

Physics letter drop
Typography / Physics and particles · physics-letter-drop

The letters of a word drop in one by one under gravity, knock against the floor and each other, and settle into a jumbled heap.

Spring-drag letters
Typography / Physics and particles · spring-drag-letters

Letters on springs get shoved aside as a pointer sweeps past, then wobble and overshoot their way back into the word once it moves on.

Type explosion
Typography / Physics and particles · type-explosion

A word sits still for a beat, then bursts apart, its letters flying outward, spinning and falling as they fade away.

Scramble and decode

Falling glyph rain reveal
Typography / Scramble and decode · falling-glyph-rain-reveal

A stream of random characters drops down above every letter, and as each stream reaches the line its front character becomes the real letter while the rest fade.

Scramble Decode
Typography / Scramble and decode · scramble-decode

Each letter flickers through random characters before locking onto the real one, the line resolving from left to right.

Shadow

Drop shadow lift
Typography / Shadow · drop-shadow-lift

Text rises toward the viewer while its shadow stays low, sliding further away and growing softer and fainter, so the words look raised off the page.

Long shadow growth
Typography / Shadow · long-shadow-growth

A flat, sharp-edged shadow slides out of the letters along a diagonal, lengthening until it trails far across the frame.

Stretch and squash

Elastic horizontal squash
Typography / Stretch and squash · elastic-horizontal-squash

Letters bulge wide and flat, then pull narrow and tall, height always trading against width, in a springy wave that wobbles along the word and settles.

Scale pulse
Typography / Stretch and squash · scale-pulse

A word repeatedly swells slightly bigger and shrinks back to its normal size about its centre, like a steady heartbeat.

Scale zoom-through
Typography / Stretch and squash · scale-zoom-through

A word swells towards the camera, picking up speed until the view passes right through an opening in its letters and the next word emerges from behind it.

Stroke and outline

Handwriting reveal
Typography / Stroke and outline · handwriting-reveal

A word draws itself in as though a pen were writing it, the ink line growing along each letter in the order a hand would make it.

Outline-to-fill
Typography / Stroke and outline · outline-to-fill

A word shown only as thin hollow outlines fills up with solid colour from the bottom, and the outline melts away once the letters are full.

Stroke draw-on
Typography / Stroke and outline · stroke-draw-on

A pen line travels around the edges of every letter until each outline is closed, and only then does the solid colour fill in.

Stroke width pulse
Typography / Stroke and outline · stroke-width-pulse

Hollow outlined lettering whose contour lines repeatedly grow heavier and then slim back down, like the word is slowly inhaling and exhaling.

Surface and light

Chrome specular shimmer
Typography / Surface and light · chrome-specular-shimmer

Letters look like mirror-polished metal, with a reflected sky and horizon that slide and tilt across them as the light turns, and a bright glint that flashes over the surface.

Gradient sweep across text
Typography / Surface and light · gradient-sweep-across-text

A stripe of blended colours travels through a word from one side to the other, tinting the letters while it covers them and letting them return to plain afterwards.

Hue cycle fill
Typography / Surface and light · hue-cycle-fill

The fill colour of the lettering keeps turning round the colour wheel, each letter slightly behind the last, so a rainbow drifts through the word.

Outline pulse glow
Typography / Surface and light · outline-pulse-glow

Text drawn as a thin coloured outline whose soft halo of light slowly swells and fades again, so the letters seem to breathe.

Shine glint sweep
Typography / Surface and light · shine-glint-sweep

A thin slanted streak of light travels across a word, brightening only the letters it touches, and finishes with a small sparkle as it leaves.

Stamp impression
Typography / Surface and light · stamp-impression

A word falls from oversize onto the frame, squashes slightly as it hits, and flares with light at the moment of contact before settling solid.

Titles and captions

Title card reveal
Typography / Titles and captions · title-card-reveal

A line sweeps out across the screen and the title climbs up out of it letter by letter, opening the piece.

Typewriter and terminal

Backspace erase
Typography / Typewriter and terminal · backspace-erase

A caret sits at the end of a line and eats it letter by letter from the right, leaving the line blank and waiting for new words.

Blinking cursor
Typography / Typewriter and terminal · blinking-cursor

A thin bar or solid block sits just after the last character and flashes on and off at a steady rhythm, as if waiting for the next keystroke.

Terminal line print
Typography / Typewriter and terminal · terminal-line-print

Monospace lines show up one whole line at a time, like output printing in a console, and the column scrolls upward once it fills.

Typed word rotator
Typography / Typewriter and terminal · typed-word-rotator

A short phrase stays fixed while its last word is typed out, backspaced away and typed again as a different word, a caret blinking at the end of the line.

Typewriter reveal
Typography / Typewriter and terminal · typewriter-reveal

A line of text fills in a single letter at a time from left to right at an even rhythm, a caret leading the way as if someone were keying it live.

Typo-correction typing
Typography / Typewriter and terminal · typo-correction-typing

Text types itself in but hits a wrong letter, hesitates, backspaces over it and carries on with the right one, like a person fixing a slip.

Variable font

Optical size shift
Typography / Variable font · optical-size-shift

A word stays the same size while its variable font slides along the optical-size axis, its letters tightening and sharpening for headlines or opening up and thickening for small text.

Slant axis swing
Typography / Variable font · slant-axis-swing

A word tips smoothly from upright type into a leaning oblique and then straightens up again, its baseline staying fixed while the letter tops travel sideways.

Typeface crossfade
Typography / Variable font · typeface-crossfade

A word holds its place while its lettering dissolves from one font into another, the two faces briefly overlapping mid-change.

Variable-font weight animation
Typography / Variable font · variable-font-weight-animation

Letters grow bolder or lighter in one smooth motion by sliding a variable font along its weight axis, for the whole word at once or rippling through it letter by letter.

Variable-font width animation
Typography / Variable font · variable-font-width-animation

The letters of a word grow wider or narrower at the same height, sweeping from condensed to extended type while the line re-spaces around them.

Wave and motion

Impact shake
Typography / Wave and motion · impact-shake

Text jerks sharply from side to side the moment something strikes it, the rattle dying away within a fraction of a second.

Jitter and boil text
Typography / Wave and motion · jitter-and-boil-text

Held letters twitch a pixel or two and their edges wobble into a slightly different shape several times a second, as if each frame were traced again by hand.

Letter sort animation
Typography / Wave and motion · letter-sort-animation

A word starts with its letters in the wrong order, and each letter glides along a small arc to its proper spot until the word reads correctly.

Sine wave text
Typography / Wave and motion · sine-wave-text

The letters of a word bob up and down along a sine curve that keeps sliding sideways, so a smooth wave rolls through the line.

Web and scroll

Hover letter displacement
Typography / Web and scroll · hover-letter-displacement

As a pointer moves along a word, the letter nearest it rises and swells while the letters beside it lift a little less, so a soft wave follows the pointer.

Scroll-driven text reveal
Typography / Web and scroll · scroll-driven-text-reveal

Faded text brightens word by word in step with how far the page has been scrolled, running backwards when the reader scrolls back up.

Transitions

Cuts

Cut on action
Transitions / Cuts · cut-on-action

A hard cut placed in the middle of a movement, so the subject is still moving the same way in the next shot and the motion carries the eye across the change.

Graphic match
Transitions / Cuts · graphic-match

A straight cut joins two unrelated scenes through a shape they share, sitting in the same spot and size, so one object seems to turn into the other.

Hard cut
Transitions / Cuts · hard-cut

One frame shows the first scene and the very next frame shows the second, with no fade, motion or blend joining them.

Insert cutaway
Transitions / Cuts · insert-cutaway

The main shot cuts suddenly to a brief second shot, a close look at a detail or a related subject, then cuts right back to the main shot, which has kept going.

Jump cut
Transitions / Cuts · jump-cut

The camera stays fixed on one shot, but the edit cuts straight to a moment later, so the subject pops to a new spot while the rest of the frame stays put.

Match cut
Transitions / Cuts · match-cut

A hard cut where something in the new shot sits in the same spot, with the same shape or movement, as something in the old one, so the change feels seamless.

Morph cut
Transitions / Cuts · morph-cut

Where a jump cut would make the subject pop to a new spot, the two shots are warped into line and blended so the subject seems to slide smoothly across the edit.

Object pass-through
Transitions / Cuts · object-pass-through

The camera slides past something close to the lens that blots out the whole frame for a moment, and when it clears the shot has become the next scene.

Reverse motion cut
Transitions / Cuts · reverse-motion-cut

The first shot runs forward, then suddenly rewinds, and the edit lands on the next shot while the movement is going backwards.

Smash cut
Transitions / Cuts · smash-cut

A calm shot is cut off without warning by a loud, starkly different one, with nothing in between to soften the change.

Stutter cut
Transitions / Cuts · stutter-cut

Right before the edit, the outgoing shot jumps back and replays the same split second a few times in a row, then the next shot cuts in.

Dissolves

Additive dissolve
Transitions / Dissolves · additive-dissolve

One scene gives way to the next by stacking their light, so the picture flares brighter in the middle where both are showing before settling on the new shot.

Blur dissolve
Transitions / Dissolves · blur-dissolve

The first shot drifts out of focus, melts into the next shot while both are soft, and the new shot then sharpens back to crisp.

Cross dissolve
Transitions / Dissolves · cross-dissolve

One scene melts into the next: the new picture grows steadily more opaque on top of the old one until the old one is gone.

Dip to Black
Transitions / Dissolves · dip-to-black

The picture fades all the way down to black, stays black for a moment, then the next scene fades up out of it.

Film dissolve
Transitions / Dissolves · film-dissolve

One scene melts into the next the way two exposures add on film: the brighter parts of each glow through the blend while the darks fade away last, with a hint of grain.

Glitch

Glitch transition
Transitions / Glitch · glitch-transition

The picture splits into horizontal strips that jerk sideways with dropouts, colour fringes and scanlines, and when the noise clears the next scene is in place.

RGB split
Transitions / Glitch · rgb-split

The red, green and blue layers of the picture drift apart sideways into coloured ghosts, the shot changes under them, and they snap back together on the new scene.

Interface and Views

Container transform
Transitions / Interface and Views · container-transform

A small card or button stretches out to fill the whole screen, its corners squaring off, while the next view fades in inside it.

Shared-element transition
Transitions / Interface and Views · shared-element-transition

An element present on both screens glides and resizes from where it sits on the first screen to where it sits on the second, while the rest of the view crossfades around it.

View transition
Transitions / Interface and Views · view-transition

One screen of an interface melts into the next as a cross-fade of the two whole views, while anything they share slides and resizes straight into its new place.

Light and Flash

Film burn
Transitions / Light and Flash · film-burn

Fiery orange and yellow light floods in from the edge of the frame as if the film were scorching, blows the picture out to near white, and cools away to reveal the next scene.

Light leak
Transitions / Light and Flash · light-leak

Glowing patches of warm orange and pink light slide across the picture, flare up almost to white, and the next scene is waiting when they clear.

Strobe cut
Transitions / Light and Flash · strobe-cut

A quick burst of white flashes flips the picture back and forth between the old and new scenes, and when the flashing stops the new scene is left on screen.

White flash transition
Transitions / Light and Flash · flash-cut

The frame blows out to bright white for an instant, the shot changes underneath, and the new scene settles back in as the glare fades.

Motion Blur

Whip pan
Transitions / Motion Blur · whip-pan

The view jerks sideways so quickly that everything streaks into a horizontal blur, and the new scene slides out of that streak and snaps sharp.

Organic and Fluid

Elastic stretch
Transitions / Organic and Fluid · elastic-stretch

The old scene is tugged out like a rubber band, growing long and thin toward one side, then lets go and whips off, leaving the new scene wobbling into place.

Ink bleed
Transitions / Organic and Fluid · ink-bleed

The next scene seeps in through spreading blots of ink whose dark, ragged edges creep outward and merge, as if soaking into paper, until it covers the frame.

Kaleidoscope
Transitions / Organic and Fluid · kaleidoscope

The shot breaks into a ring of mirror-image slices around its centre that turn like a kaleidoscope, and when the pattern settles the next shot is showing.

Liquid morph
Transitions / Organic and Fluid · liquid-morph

Blobs of the next scene bubble up over the current one and run together like drops of liquid, fusing into one pool that takes over the frame.

Paint brush wipe
Transitions / Organic and Fluid · paint-brush-wipe

A wide brush drags across the picture in rows, and each rough-edged stroke it leaves is a window onto the next scene until the whole frame is painted over.

Ripple
Transitions / Organic and Fluid · ripple

Rings spread outward from a point like a stone dropped in a pond, warping the picture as they pass, and the new scene is left calm behind them.

Shape morph
Transitions / Organic and Fluid · shape-morph

One outline flows continuously into a different outline, its edges sliding into the new shape rather than cutting or fading between the two.

Smoke dissolve
Transitions / Organic and Fluid · smoke-dissolve

A ragged bank of drifting smoke rolls across the shot, and the next scene appears wherever the smoke thins out behind it.

Swirl
Transitions / Organic and Fluid · swirl

The first scene twists around its centre like water going down a drain, hardest in the middle, and the second scene unwinds out of the same whirl.

Page and Fold

Accordion fold
Transitions / Page and Fold · accordion-fold

The first scene is creased into a row of zigzag pleats that squeeze shut like a closing fan, and the next scene shows through as it folds away.

Crumple
Transitions / Page and Fold · crumple

The picture creases and scrunches up like a sheet of paper balled in a fist, then the wad opens back out flat as the next scene.

Origami fold
Transitions / Page and Fold · origami-fold

The outgoing picture creases like a sheet of paper, folding into flat angled facets again and again until the small folded piece leaves the next scene behind it.

Page turn
Transitions / Page and Fold · page-turn

A corner of the current picture lifts like paper and folds back across the frame, its blank underside sweeping over it, until the sheet is gone and the next scene lies beneath.

Roll-up
Transitions / Page and Fold · roll-up

The old scene winds itself into a tube starting at the bottom edge, and the tube climbs up and off the frame, leaving the new scene where the picture used to lie.

Pixel and Mosaic

Pixelate transition
Transitions / Pixel and Mosaic · pixelate-transition

The first shot dissolves into chunkier and chunkier square pixels, then the next shot comes out of that blocky mosaic and sharpens back to full detail.

Rotation and 3D

Cube rotate
Transitions / Rotation and 3D · cube-rotate

The two scenes behave like neighbouring sides of a box that turns a quarter turn, so the old one swings off to the side in perspective as the new one swings round to face you.

Door swing
Transitions / Rotation and 3D · door-swing

The current shot pivots on one side edge and swings away from the camera in 3D, like a door being pushed open, revealing the next shot behind it.

Flip
Transitions / Rotation and 3D · flip

The whole picture turns over like a playing card about its middle, and the next scene is waiting on the other side.

Spin
Transitions / Rotation and 3D · spin

The whole picture whirls around its centre and shrinks away, and the next scene carries on the same turn as it grows back to fill the screen.

Tumble
Transitions / Rotation and 3D · tumble

The current scene leans back on its bottom edge like a toppling board and falls flat into the distance, uncovering the next scene behind it.

Shape and Mask

Text mask reveal
Transitions / Shape and Mask · text-mask-reveal

A large word becomes a window cut into the current shot, showing the next one inside its letters, then zooms in until a single letter fills the screen.

Shatter and Break

Shatter
Transitions / Shatter and Break · shatter

The first scene cracks like a struck pane of glass and breaks into shards that burst outward and tumble away, uncovering the next scene behind it.

Tile flip
Transitions / Shatter and Break · tile-flip

The picture breaks into a grid of squares that each turn over like cards in a rippling wave, and the backs of the squares together make up the next scene.

Slides and Pushes

Canvas pan and zoom
Transitions / Slides and Pushes · canvas-pan-and-zoom

The camera backs away from one spot on a large board, travels across it and closes in on another spot, so the next scene is a different place on the same surface.

Parallax slide
Transitions / Slides and Pushes · parallax-slide

The next scene slides in sideways over the last one while each scene's background drifts slowly and its foreground pieces race ahead, so the move feels deep.

Push
Transitions / Slides and Pushes · push

The next scene slides in from one side and shoves the current one out the other side, the two moving together as a single strip.

Slide-over cover
Transitions / Slides and Pushes · slide-over-cover

The next scene glides in from one side and lays itself on top of the current scene, which stays perfectly still underneath until it is hidden.

Split-screen transition
Transitions / Slides and Pushes · split-screen-transition

The next scene slides in beside the current one so both share the frame for a moment, then it slides on across until it fills the screen.

Stacked card reveal
Transitions / Slides and Pushes · stacked-card-reveal

The current scene becomes the top card of a small deck and is flicked off to the side, uncovering the next scene as the card beneath, which comes forward and fills the frame.

Uncover
Transitions / Slides and Pushes · uncover

The current scene slides out of frame in one direction, revealing the next scene, which was waiting motionless underneath it.

Wipes

Barn door wipe
Transitions / Wipes · barn-door-wipe

A gap opens along the centre line of the old shot and its two edges sweep out to the sides of the frame, uncovering the new shot as it widens.

Box wipe
Transitions / Wipes · box-wipe

A rectangle opens out from the middle of the picture and keeps growing to the edges, with the next scene inside it replacing the old one.

Checkerboard wipe
Transitions / Wipes · checkerboard-wipe

The screen is split into a grid of squares and the next scene wipes into every other square first, then into the squares between them, like a chessboard filling in.

Clock wipe
Transitions / Wipes · clock-wipe

A straight edge pinned at the centre of the frame turns one full circle like a clock hand, and the next scene shows up in the wedge it leaves behind.

Corner wipe
Transitions / Wipes · corner-wipe

The next scene spreads out from one corner of the screen in a growing curve until it covers the whole frame.

Diagonal wipe
Transitions / Wipes · diagonal-wipe

A straight line tilted at an angle slides across the picture, and everything it has passed over already shows the next scene.

Diamond wipe
Transitions / Wipes · diamond-wipe

The next scene appears inside a small diamond at the middle of the screen, and the diamond widens until it takes over the whole frame.

Drip wipe
Transitions / Wipes · drip-wipe

The next scene pours down from the top of the frame like wet paint, its lower edge hanging in uneven drips that run ahead until the screen is covered.

Gradient wipe
Transitions / Wipes · gradient-wipe

The next scene washes in across the frame along a blurred, curving front, its shape set by a black-to-white map that is revealed darkest parts first.

Heart wipe
Transitions / Wipes · heart-wipe

A small heart opens in the middle of the old shot and swells until the new shot, seen through it, fills the whole frame.

Iris wipe
Transitions / Wipes · iris-wipe

A circle opens from a point in the middle of the frame and keeps growing, showing the next scene inside it, until that scene fills the whole screen.

Linear wipe
Transitions / Wipes · linear-wipe

A single straight, sharp line slides from one side of the frame to the other, and the new scene takes over everything the line has already passed.

Luma wipe
Transitions / Wipes · luma-wipe

The next scene seeps in through a greyscale pattern, darkest areas first and lightest last, so the changeover takes on the pattern's shapes.

Pinwheel wipe
Transitions / Wipes · pinwheel-wipe

Several blades fanned out from the centre of the frame all rotate together, each one sweeping the next picture into view until the whole screen has turned over.

Scanline wipe
Transitions / Wipes · scanline-wipe

The next scene is painted in over the old one as thin horizontal stripes, every other stripe first and then the gaps between them, like an old screen redrawing.

Shutter wipe
Transitions / Wipes · shutter-wipe

The old shot is sliced into a row of strips that open one after another, each widening from its middle, so the new shot appears band by band.

Spiral wipe
Transitions / Wipes · spiral-wipe

The next scene unwinds into view along a widening coil that starts at the centre and spirals outward until it fills the frame.

Star wipe
Transitions / Wipes · star-wipe

A star shape opens up in the middle of the old shot and grows, turning slightly, with the new shot inside it, until the new shot fills the frame.

Venetian blinds wipe
Transitions / Wipes · venetian-blinds-wipe

The screen splits into a stack of thin bands, and every band opens out from its middle at once to show the next scene, like turning the slats of a window blind.

Zigzag wipe
Transitions / Wipes · zigzag-wipe

The next scene slides in behind a line of sharp triangular teeth that travels across the screen, so the cut between the two shots is a jagged saw edge.

Zoom

Cross zoom
Transitions / Zoom · cross-zoom

The view lunges into the first shot in a streaking blur, and right at the fastest point it swaps to the second shot, which pulls back out of the same blur into place.

Dolly zoom
Transitions / Zoom · dolly-zoom

The subject in the middle stays exactly the same size while the space behind it seems to stretch away or squeeze up close, as if the camera moved one way and zoomed the other.

Punch-in
Transitions / Zoom · punch-in

The frame lunges in toward the subject in a fraction of a second, blurred by its own speed, and lands on a tighter shot or the next cut.

Zoom blur
Transitions / Zoom · zoom-blur

The first shot lunges toward the camera and smears into streaks radiating from the centre, and the next shot pulls out of that smear back into sharp focus.

Zoom out reveal
Transitions / Zoom · zoom-out-reveal

The current shot backs away from the viewer until it is just a small framed picture, and the next scene appears as the larger world around it.

Zoom through
Transitions / Zoom · zoom-through

The camera rushes into the first scene until it blows past the lens in a blur, and the next scene comes up out of that rush and settles into place.

UI and interaction

Buttons

Arrow slide
UI and interaction / Buttons · arrow-slide

When a button is hovered, its arrow glides off past its edge while a twin arrow glides in from behind to settle in the same spot.

Border draw button
UI and interaction / Buttons · border-draw-button

A thin line runs around the edge of a button, tracing its outline on, and the button brightens once the line closes the loop.

Fill sweep button
UI and interaction / Buttons · fill-sweep-button

When the pointer lands on a button, a block of colour slides across it from one side, and the label switches colour right at the advancing edge.

Glow button
UI and interaction / Buttons · glow-button

When the pointer lands on a button, a soft halo of colour swells out from behind it and its rim lights up, the light gently breathing while the hover lasts.

Gradient shift button
UI and interaction / Buttons · gradient-shift-button

A button filled with a gradient that keeps gliding slowly across it, sliding noticeably further when the pointer rests on it.

Hold to confirm
UI and interaction / Buttons · hold-to-confirm

A button fills steadily from one side while it is pressed and kept down, and only flips to its done state once the fill reaches the other side.

Hover lift
UI and interaction / Buttons · hover-lift

When the pointer moves onto a button it floats up slightly with a bigger, softer shadow beneath it, and drops back down once the pointer moves away.

Liquid button
UI and interaction / Buttons · liquid-button

A button whose edge swells and stretches toward the pointer as if made of thick liquid, then springs back and wobbles into its normal shape when released.

Loading state morph
UI and interaction / Buttons · loading-state-morph

A clicked button pinches in from both ends into a round spinner while it works, then stretches back out into a button that shows the result.

Magnetic button
UI and interaction / Buttons · magnetic-button

A button that leans toward a nearby pointer, its label shifting a bit more than the pill, and eases back to its spot when the pointer goes away.

Press depress
UI and interaction / Buttons · press-depress

A raised button sinks down into its base as it is pushed, its shadow shrinking flat, and pops back up with a small spring when let go.

Sheen sweep
UI and interaction / Buttons · sheen-sweep

A slanted strip of soft light slides once across a button from one side to the other, so its surface looks glossy for a moment.

Squash on tap
UI and interaction / Buttons · squash-on-tap

When pressed, a button flattens and spreads sideways, then springs back past its shape into a brief tall stretch and wobbles to rest.

Touch ripple
UI and interaction / Buttons · touch-ripple

When a button is tapped, a soft circle spreads out from the spot the finger touched until it fills the button, then fades away.

Cards & media

Aurora gradient background
UI and interaction / Cards & media · aurora-gradient-background

Large, blurry patches of colour drift and blend into one another behind the content, giving the background a slow, living glow.

Before-after slider
UI and interaction / Cards & media · before-after-slider

Two versions of the same picture share one frame, and a draggable vertical line with a handle slides across it, showing the old version on one side and the new one on the other.

Gradient border spin
UI and interaction / Cards & media · gradient-border-spin

A streak of blended colour chases round and round the outline of a card, lighting each stretch of the edge as it passes.

Image crossfade slideshow
UI and interaction / Cards & media · image-crossfade-slideshow

A gallery that shows one picture at a time, and to move on, the next picture fades in right on top of the current one instead of sliding across.

Cursor & hover

3D tilt on hover
UI and interaction / Cursor & hover · three-d-tilt-on-hover

A card leans in perspective towards wherever the pointer sits on it, with a glint following the pointer, and eases back flat once the pointer moves off.

Avatar stack spread
UI and interaction / Cursor & hover · avatar-stack-spread

A row of overlapping profile pictures slides apart into separate, evenly spaced circles when the pointer hovers over the group.

Border glow follow
UI and interaction / Cursor & hover · border-glow-follow

Only the stretch of a card's outline closest to the mouse pointer glows, and that bright patch slides around the edge to stay with the pointer as it moves.

Cursor follower dot and ring
UI and interaction / Cursor & hover · cursor-follower-dot-and-ring

A custom pointer made of a dot that sits right on the mouse and an outline ring that drifts after it, trailing on fast moves and re-centring when it stops.

Cursor particle trail
UI and interaction / Cursor & hover · cursor-particle-trail

A moving mouse pointer leaves a stream of small dots behind it that drift apart, shrink and fade out, tracing where it has just been.

Cursor state change
UI and interaction / Cursor & hover · cursor-state-change

A custom pointer that changes form when it reaches something clickable, here swelling from an arrow into a labelled disc and shrinking back as it leaves.

Dock magnification
UI and interaction / Cursor & hover · dock-magnification

As a pointer slides along a row of icons, the one beneath it grows largest and its neighbours swell less the farther away they sit, pushing the row wider as it passes.

Image hover mask reveal
UI and interaction / Cursor & hover · image-hover-mask-reveal

When the pointer rests on an image, a circle swells out from the cursor and uncovers a second version of the picture underneath until it fills the frame.

Image hover zoom
UI and interaction / Cursor & hover · image-hover-zoom

When a pointer rests on a picture, the picture slowly enlarges inside its fixed frame, which crops the edges, and shrinks back once the pointer moves off.

Particle field repel
UI and interaction / Cursor & hover · particle-field-repel

A pointer moving through a softly drifting field of dots shoves the nearby ones aside, and they glide back into place once it has passed.

Pointer parallax layers
UI and interaction / Cursor & hover · pointer-parallax-layers

As the mouse pointer moves over a picture built from flat cut-out layers, each layer slides by a different amount, the nearest the most, so the scene seems to have depth.

Spotlight hover
UI and interaction / Cursor & hover · spotlight-hover

A soft circle of light tracks the pointer across a dark card, brightening the surface and the edge nearest it, and fades away when the pointer moves off.

Underline wipe
UI and interaction / Cursor & hover · underline-wipe

When the pointer rests on a link a line draws out beneath it from one end to the other, and when the pointer leaves the line carries on and slides away off the far end.

Feedback & status

Badge count bump
UI and interaction / Feedback & status · badge-count-bump

A small number badge swells and springs back to size every time its count ticks up, the new number appearing at the peak.

Circle check draw
UI and interaction / Feedback & status · circle-check-draw

A ring traces itself around a point and a check mark then strokes in inside it, confirming that something finished.

Empty state idle loop
UI and interaction / Feedback & status · empty-state-idle-loop

The small picture shown in a view with no content yet drifts, sways and pulses softly on a short repeating cycle, so the blank screen still feels alive.

Equalizer bars
UI and interaction / Feedback & status · audio-waveform-bars

A row of vertical bars that leap and drop to the beat, each one tracking how loud its slice of the sound is, like the meter on a stereo.

Error shake
UI and interaction / Feedback & status · error-shake

An input that was just rejected jerks quickly from side to side, each swing smaller than the one before, then settles back in place.

Loading to success morph
UI and interaction / Feedback & status · loading-to-success-morph

A spinning loading arc closes into a complete ring, fills in with a confirming colour, and a check mark draws itself inside it.

Pagination pill indicator
UI and interaction / Feedback & status · pagination-pill-indicator

A row of small page dots in which the current page shows as a longer coloured capsule, which shrinks back as its neighbour lengthens whenever the page turns.

Progress steps connector fill
UI and interaction / Feedback & status · progress-steps-connector-fill

A row of numbered step markers joined by empty tracks, where colour flows along each track in turn and fills in every marker it reaches as that step is completed.

Staged onboarding walkthrough
UI and interaction / Feedback & status · staged-onboarding-walkthrough

A highlight moves from one part of an interface to the next, and each stop gets its own numbered caption that only appears once the previous step has finished.

Toast auto-dismiss bar
UI and interaction / Feedback & status · toast-auto-dismiss-bar

A small pop-up message slides in with a thin strip along its edge that shrinks away like a timer, and once the strip is gone the message slides off by itself.

Toast slide-in stack
UI and interaction / Feedback & status · toast-slide-in-stack

Short notification cards glide in from the edge of the screen one at a time, and each new one shoves the earlier cards up so they build a tidy column.

Forms

Floating label
UI and interaction / Forms · floating-label

A text field's label starts inside the empty box like a hint, then shrinks and slides up onto the field's top edge when the field is selected, leaving room for the typed value.

Focus ring draw
UI and interaction / Forms · focus-ring-draw

When a control gains keyboard focus, an outline sweeps around it and eases out to sit a little way off its edge.

Input underline grow
UI and interaction / Forms · input-underline-grow

A text field gains focus and an accent bar spreads out from the middle of its bottom edge to both ends, marking it active.

Password reveal toggle
UI and interaction / Forms · password-reveal-toggle

Clicking the eye at the end of a password field lifts its lid open, and the row of masking dots turns into the typed characters.

Gestures & drag

Drag lift with shadow
UI and interaction / Gestures & drag · drag-lift-with-shadow

When the pointer grabs an item it grows a little and its shadow falls further and softer beneath it, so it seems to hover above the page as it is dragged, then sinks back when dropped.

Drop target highlight
UI and interaction / Gestures & drag · drop-target-highlight

An empty landing area lights up, its outline turning bright and glowing softly, the moment something being dragged moves over it, showing it will accept the drop.

Momentum fling
UI and interaction / Gestures & drag · momentum-fling

Something dragged and let go mid-swipe keeps sliding at the speed it was thrown, then slows down smoothly until it comes to a stop.

Pull to refresh
UI and interaction / Gestures & drag · pull-to-refresh

Dragging a list down from its top opens a gap where a spinner grows and turns, then the list springs back up with fresh items.

Reorder list shuffle
UI and interaction / Gestures & drag · reorder-list-shuffle

A row is lifted out of a list and dragged to a new position while the rows it passes glide aside one by one, keeping an empty slot open beneath it until it drops in.

Row collapse removal
UI and interaction / Gestures & drag · row-collapse-removal

A deleted row in a list fades and flattens to nothing, and the rows below it glide up to fill the space it left.

Rubber band overscroll
UI and interaction / Gestures & drag · rubber-band-overscroll

A list dragged beyond its first or last item follows the finger more and more grudgingly, then snaps back to its edge as soon as it is let go.

Swipe action row
UI and interaction / Gestures & drag · swipe-action-row

A list item is pulled sideways by a finger or pointer, and coloured buttons such as archive or delete appear in the space it slides away from.

Swipe to dismiss
UI and interaction / Gestures & drag · swipe-to-dismiss

A card slides sideways under a dragging finger and, once let go, either springs back to its place or, if pushed far enough, keeps going and leaves the screen.

Layout & lists

Bento grid reveal
UI and interaction / Layout & lists · bento-grid-reveal

The panels of an uneven, mixed-size grid appear one after another, each fading in and growing slightly into its slot until the whole layout is filled.

Blur-up image load
UI and interaction / Layout & lists · blur-up-image-load

A picture first shows as a soft, smeared preview, then comes into focus as the real image finishes loading.

Infinite scroll append
UI and interaction / Layout & lists · infinite-scroll-append

As a list is scrolled near its last row, a brief loader appears and a new batch of rows fades up underneath, so the list simply keeps going.

Layout animation (FLIP)
UI and interaction / Layout & lists · layout-animation-flip

When a layout changes, every element slides and resizes smoothly from its old spot to its new one instead of snapping there.

Masonry reflow
UI and interaction / Layout & lists · masonry-reflow

Cards of uneven heights stacked in columns slide to their newly packed spots when some are filtered away or the columns change, so each column closes up smoothly.

Loaders

Bouncing dots
UI and interaction / Loaders · bouncing-dots

A short row of dots that hop up and drop back one after another in a repeating wave, signalling that something is busy or a message is on its way.

Grid wave loader
UI and interaction / Loaders · grid-wave-loader

A waiting indicator made of a line of bars that stretch tall and sink back one after another, so a swell keeps rolling across them.

Indeterminate bar
UI and interaction / Loaders · indeterminate-bar

A thin progress track where a coloured segment keeps sweeping from left to right, growing and shrinking as it travels, to show work going on without a known amount.

Orbit loader
UI and interaction / Loaders · orbit-loader

A waiting indicator where a few small dots circle a still centre point on the same ring, each at its own constant speed, so they keep overtaking one another.

Progress ring
UI and interaction / Loaders · progress-ring

A thick circular stroke sweeps clockwise around a faint track, from empty toward full, to show how far along something is.

Pulse loader
UI and interaction / Loaders · pulse-loader

A busy indicator where rings keep swelling out of a steady dot and fading away, signalling that something is in progress without saying how far along it is.

Shape morph loader
UI and interaction / Loaders · shape-morph-loader

A waiting indicator in which a single filled shape keeps reshaping itself, circle to square to triangle and round again, turning slightly with each change.

Skeleton shimmer
UI and interaction / Loaders · skeleton-shimmer

Flat grey shapes sketch out where text and images will appear, while a soft strip of light glides across them again and again to show the page is still loading.

Spinner ring
UI and interaction / Loaders · spinner-ring

A busy indicator in which a rounded arc races around a faint circle, stretching out and shrinking back as it goes.

Striped progress bar
UI and interaction / Loaders · striped-progress-bar

A progress bar whose filled portion is painted with slanted stripes that keep scrolling sideways, showing work in progress even when the fill barely moves.

Stroke draw logo loader
UI and interaction / Loaders · stroke-draw-logo-loader

While something loads, a brand mark is traced out as a single moving line, fills in solid once the line meets itself, then clears and traces again.

Overlays & menus

Accordion height expand
UI and interaction / Overlays & menus · accordion-height-expand

A closed panel opens by smoothly growing taller until its contents are fully shown, nudging the rows beneath it further down as it grows.

Bottom sheet slide-up
UI and interaction / Overlays & menus · bottom-sheet-slide-up

A panel of options rises from the bottom edge of the screen while the view behind it dims, and is pulled back down by its handle to close.

Circular clip reveal
UI and interaction / Overlays & menus · circular-clip-reveal

Pressing a control makes the next screen open out of it as a growing circle, which spreads from that spot until the new screen covers the whole view.

Coachmark spotlight cutout
UI and interaction / Overlays & menus · coachmark-spotlight-cutout

A dark veil covers the interface except for a clear rounded window around one control, with a pointer bubble explaining it, and the window then slides on to the next control.

Context menu origin reveal
UI and interaction / Overlays & menus · context-menu-origin-reveal

A pop-up menu grows out of the spot where it was clicked, scaling up from the corner at the pointer as it fades in, and opens away from the screen edge.

Hover-reveal actions
UI and interaction / Overlays & menus · hover-reveal-actions

Buttons for acting on an item stay hidden until the pointer rests on it, then slide and fade in at its edge, and tuck away again when the pointer leaves.

Radial menu fan-out
UI and interaction / Overlays & menus · radial-menu-fan-out

Tapping a round button sends a set of smaller option buttons springing out around it in an arc, one after another, while its plus icon turns into a close cross.

Speed dial fan
UI and interaction / Overlays & menus · speed-dial-fan

A round floating button spins its plus into a cross as a few smaller action buttons pop out of it in turn and spread along an arc.

Tooltip fade follow
UI and interaction / Overlays & menus · tooltip-fade-follow

A small label fades in once the pointer is over something, drifts along a moment behind the pointer as it moves, and fades away when the pointer leaves.

Page transitions

Page load sequence
UI and interaction / Page transitions · page-load-sequence

When a screen opens, its pieces arrive one after another in a planned order, the frame and menu first and the content after, each sliding a little and fading into place.

Tab panel slide
UI and interaction / Page transitions · tab-panel-slide

Picking a different tab pushes the current panel out sideways as it fades, while the new panel glides in from the side of the tab that was chosen.

Scroll

Fade-up scroll reveal
UI and interaction / Scroll · fade-up-scroll-reveal

As a page scrolls, each section stays invisible until it nears the viewport, then fades in while drifting a short way up into place.

Horizontal scroll section
UI and interaction / Scroll · horizontal-scroll-section

A section locks in place as the page is scrolled down, and the downward scrolling slides its row of panels sideways until the row runs out and the page moves on.

Infinite marquee
UI and interaction / Scroll · infinite-marquee

A strip of logos, words or tiles glides sideways at an even pace without end, the set repeating so the row never runs out or shows a gap.

Scroll parallax layers
UI and interaction / Scroll · scroll-parallax-layers

As a page scrolls, its background, headline and content each move at their own speed, the far layers lagging behind the near ones so the page feels deep.

Scroll pin section
UI and interaction / Scroll · scroll-pin-section

As the page scrolls, one section locks in place on screen and plays out its own animation for a while, then lets go and scrolls off with everything else.

Scroll progress bar
UI and interaction / Scroll · scroll-progress-bar

A slim strip along the top edge of a page grows from left to right as the page scrolls, reaching full width at the bottom.

Scroll snap sections
UI and interaction / Scroll · scroll-snap-sections

A page scrolled by hand never rests between its full-screen sections: when the finger lets go it eases to the nearest section edge, forward or back.

Scroll velocity skew
UI and interaction / Scroll · scroll-velocity-skew

While a page scrolls, its items lean and stretch more the faster it moves, then settle back square once the scrolling stops.

Scroll-drawn SVG path
UI and interaction / Scroll · scroll-drawn-svg-path

A line running down a long page fills in as the page scrolls, its leading tip keeping pace with the reader so the stroke grows exactly as far as they have read.

Scroll-linked background shift
UI and interaction / Scroll · scroll-linked-background-shift

As a page scrolls, the colour behind it eases from one section's hue into the next each time a new section moves into view.

Scroll-linked clip reveal
UI and interaction / Scroll · scroll-linked-clip-reveal

As the page scrolls, a photo starts as a small cropped window that widens and heightens with the scroll until the whole picture is showing.

Scroll-scrubbed frame sequence
UI and interaction / Scroll · scroll-scrubbed-frame-sequence

A pinned picture steps through a numbered run of stills in time with the page scroll, so scrolling down plays the clip forward and scrolling up plays it backward.

Scrollspy nav indicator
UI and interaction / Scroll · scrollspy-nav-indicator

As a page scrolls past its sections, the matching entry in a side menu lights up and a highlight slides along the menu to sit on it.

Scrollytelling step sequence
UI and interaction / Scroll · scrollytelling-step-sequence

Short blocks of text scroll past a graphic that stays pinned in place, and each time a new block reaches the middle the graphic lights up the part that block describes.

Shrinking sticky header
UI and interaction / Scroll · shrinking-sticky-header

A large header stays fixed at the top while the page scrolls beneath it, squeezing down into a thin bar with a smaller title as you scroll.

Smooth scroll inertia
UI and interaction / Scroll · smooth-scroll-inertia

Each scroll input sets a target the page then chases, gliding quickly at first and easing gently to rest, so choppy wheel steps become one fluid motion.

Staggered cascade reveal
UI and interaction / Scroll · staggered-cascade-reveal

The items of a list or grid come into view in turn, each one rising and fading in a moment after the one before it.

Sticky card stack on scroll
UI and interaction / Scroll · sticky-card-stack-on-scroll

As a page scrolls, each card stops when it reaches the top and the next card rides up over it, so the cards pile into a stack instead of leaving the screen.

Text & type

Highlighter swipe
UI and interaction / Text & type · highlighter-swipe

A see-through band of marker colour is dragged across a word or phrase from left to right, leaving it highlighted as if with a felt-tip pen.

Letter roll
UI and interaction / Text & type · letter-roll

When the pointer lands on a label, its letters scroll up and away one after another, each replaced by an identical letter rising into its slot from underneath.

Theme

Theme swap crossfade
UI and interaction / Theme · theme-swap-crossfade

When the interface switches between dark and light mode, the background, cards and text all ease from their old colours to their new ones together rather than flipping instantly.

Toggles & controls

Bookmark fill
UI and interaction / Toggles & controls · bookmark-fill

Clicking an outlined bookmark icon floods it with colour from the bottom up, and it gives a small springy pop once it is solid to show the item is saved.

Checkbox check draw
UI and interaction / Toggles & controls · checkbox-check-draw

An empty checkbox floods with colour and gives a small squeeze while a tick mark strokes itself on inside it, short leg first and then the long one.

Hamburger to X
UI and interaction / Toggles & controls · hamburger-to-x

A three-line menu icon folds into a close cross: the outer lines slide onto the middle one, which disappears, then swing round into an X.

Indeterminate dash morph
UI and interaction / Toggles & controls · indeterminate-dash-morph

A checkbox showing a flat dash for a partial selection bends that same stroke into a tick when it becomes fully checked.

Like heart burst
UI and interaction / Toggles & controls · like-heart-burst

Tapping a hollow heart squeezes it, then it springs back filled with colour while a ring and a spray of tiny dots and hearts shoot out around it and fade.

Play-pause morph
UI and interaction / Toggles & controls · play-pause-morph

Pressing a media button bends its play arrow into the two pause bars, the corners sliding to their new spots instead of swapping icons.

Plus to close rotate
UI and interaction / Toggles & controls · plus-to-close-rotate

A plus sign turns an eighth of a turn to read as an x while the panel it belongs to expands, then spins back when the panel folds shut.

Radio dot scale
UI and interaction / Toggles & controls · radio-dot-scale

Picking a radio option makes the dot inside its ring grow from a point, swell slightly too big and settle at its final size.

Range slider value bubble
UI and interaction / Toggles & controls · range-slider-value-bubble

A little tag pops up over a slider handle as it is dragged, slides along with it showing the live number, and disappears when the handle is released.

Segmented control slide
UI and interaction / Toggles & controls · segmented-control-slide

When a different option in a row of choices is picked, the coloured highlight behind the current one slides across to it and stretches or narrows to fit its label.

Star rating fill
UI and interaction / Toggles & controls · star-rating-fill

A row of hollow stars fills with colour one after another up to a score, each star bumping as it completes and the last filled only partly for a half or fractional score.

Tab underline slide
UI and interaction / Toggles & controls · tab-underline-slide

When another tab is chosen, the coloured line under the current tab glides across to it, stretching out on the way and settling to the new tab's width.

Toggle switch slide
UI and interaction / Toggles & controls · toggle-switch-slide

A rounded on/off switch whose circular knob glides to the other end of its track as the track changes colour to show the new state.

Shapes and icons

Bounce & pop

Badge stamp impact
Shapes and icons / Bounce & pop · badge-stamp-impact

A badge drops in from above, slams onto its spot with a quick squash and a rattle, then springs back to size and sits still.

Circle pop
Shapes and icons / Bounce & pop · circle-pop

A circle grows from a point, briefly swells beyond its final size, then shrinks back and settles there.

Bursts & particles

Confetti burst
Shapes and icons / Bursts & particles · confetti-burst

A spray of small coloured paper pieces shoots up from one spot, fans out, then spins, flips and flutters slowly back down.

Particle swarm assemble
Shapes and icons / Bursts & particles · particle-swarm-assemble

Many tiny dots spread across the frame drift together, each arriving in its own time, until they settle along the outline of a shape or logo.

Pixel build
Shapes and icons / Bursts & particles · pixel-build

An image is put together from small square blocks that pop onto a grid one after another, filling in until the full pixel picture stands complete.

Shape burst
Shapes and icons / Bursts & particles · shape-burst

A handful of small mixed shapes shoots out from a single point in every direction, spinning as it slows, then shrinks away to nothing.

Characters & rigs

2D character rig
Shapes and icons / Characters & rigs · flat-character-rig

A flat cut-out character built from separate pieces pinned at joints, so turning a shoulder swings the forearm and hand with it as the figure is posed.

Rubber hose animation
Shapes and icons / Characters & rigs · rubber-hose-limb-animation

An old-cartoon character style whose arms and legs are smooth, jointless tubes that bend into soft curves instead of folding at elbows and knees.

Cut-out & paper

Collage assembly
Shapes and icons / Cut-out & paper · collage-assembly

Paper cut-outs of shapes, colour and pictures slide in one after another and press down on top of each other until they make a finished collage.

Cut-out paper animation
Shapes and icons / Cut-out & paper · cut-out-paper-animation

A figure built from flat, hinged pieces of coloured paper, each casting a thin shadow, is re-posed in small jerky steps like a hand-moved model shot frame by frame.

Paper fold reveal
Shapes and icons / Cut-out & paper · paper-fold-reveal

A folded sheet opens out one panel at a time, each flap swinging over its crease in perspective, until the flattened page shows what is printed on it.

Depth & shadows

Drop shadow breathing
Shapes and icons / Depth & shadows · drop-shadow-breathing

A shape rises and settles while its shadow loosens, slides away and fades on the way up, then snaps back tight and dark beneath it as it comes down.

Long shadow extension
Shapes and icons / Depth & shadows · long-shadow-extension

A flat shape trails a solid, sharp-edged shadow off at a diagonal, and the shadow reaches further out and then draws back in.

Explainer & infographic

Callout highlight
Shapes and icons / Explainer & infographic · callout-highlight

Everything but one area darkens, a bright frame closes in around that area, and a small tag appears beside it naming what to look at.

Connector network
Shapes and icons / Explainer & infographic · connector-network

Dots pop onto the screen and straight lines grow between them one after another, until a web of connected points has been drawn.

Infographic icon sequence
Shapes and icons / Explainer & infographic · infographic-icon-sequence

A row of simple icons in badges appears one at a time, each popping in with its label while a line links it to the one before, so they read as ordered steps.

Map pin drop
Shapes and icons / Explainer & infographic · map-pin-drop

A teardrop location marker falls from above onto a spot on a map, squashes and hops once as it lands, and sends a fading ring outward from its tip.

Map route draw
Shapes and icons / Explainer & infographic · map-route-draw

A line traces a journey across a map, growing from one stop to the next with a marker at its tip while each place is pinned as the line arrives.

Shape fill sweep
Shapes and icons / Explainer & infographic · shape-fill-sweep

An empty outlined shape floods with colour from one side to the other, the colour advancing behind a straight edge until the whole shape is solid.

Shape stacking drop
Shapes and icons / Explainer & infographic · shape-stacking-drop

Solid blocks drop in from above one after another, each landing with a little squash on top of the last, until they form a standing tower.

Geometric & Swiss style

Bauhaus geometric shuffle
Shapes and icons / Geometric & Swiss style · bauhaus-geometric-shuffle

A few flat primary-coloured circles, squares and triangles glide and turn together from one arrangement into another, settling into a fresh composition each time.

Rotating polygon loop
Shapes and icons / Geometric & Swiss style · rotating-polygon-loop

Nested regular polygons each turn by one corner-to-corner step per beat, alternating direction, so the pattern snaps round and repeats without a visible seam.

Swiss grid slide
Shapes and icons / Geometric & Swiss style · swiss-grid-slide

A thin modular grid draws itself in, a bold rule sweeps across it, and blocks and letters slide one column at a time into the cells so the layout locks onto the grid.

Geometric motion

Geometric loop
Shapes and icons / Geometric motion · geometric-loop

Simple shapes in a pattern turn, spin and pulse together in a cycle that ends exactly where it began, so it can repeat forever without a visible seam.

Lissajous figure trace
Shapes and icons / Geometric motion · lissajous-figure-trace

A pen pushed by one side-to-side wave and one up-and-down wave at different speeds draws a looping, knotted curve as it goes.

Orbital pulse
Shapes and icons / Geometric motion · orbital-pulse

A glowing dot circles a faint ring, and the part of the ring it has just passed lights up behind it and fades away like a tail.

Rotating rings
Shapes and icons / Geometric motion · rotating-rings

Nested circles share one centre and each turns at its own pace, some one way and some the other, with broken or dashed strokes so the turning is easy to follow.

Spiral expansion draw
Shapes and icons / Geometric motion · spiral-expansion-draw

A single line starts at a centre point and winds outward, laying down one widening turn after another until the whole spiral is drawn.

Spirograph
Shapes and icons / Geometric motion · hypocycloid-spirograph

A pen fixed in a small wheel rolling round the inside of a larger ring draws a looping, petalled line that grows until the pattern closes on itself.

Zoom-through shape
Shapes and icons / Geometric motion · zoom-through-shape

Outlines of the same shape sit one inside another and keep growing out of the centre, so it feels like flying forward through each frame in turn.

Gradients & color

Animated gradient sweep
Shapes and icons / Gradients & color · animated-gradient-sweep

A multi-colour gradient fill whose colours keep sliding across a shape in one direction, so the surface looks like it is flowing.

Color cycling
Shapes and icons / Gradients & color · color-cycling

A still image whose palette is rotated a step at a time, so stripes of colour seem to stream through it although no shape moves.

Gradient mesh drift
Shapes and icons / Gradients & color · gradient-mesh-drift

Several soft pools of colour blend into one smooth gradient and slowly wander about, so the colours keep flowing into new shapes.

Palette shift transition
Shapes and icons / Gradients & color · palette-shift-transition

Every colour in a graphic slides over to a new colour scheme in one timed move, while the shapes themselves stay exactly where they are.

Hand-drawn & traditional

Cel shading look
Shapes and icons / Hand-drawn & traditional · cel-shading-look

A form is coloured in a few flat tones with crisp edges between light and shadow, like a cartoon cel, and those shadow shapes slide across it as the light moves.

Frame-by-frame hand-drawn animation
Shapes and icons / Hand-drawn & traditional · frame-by-frame-hand-drawn-animation

Movement built from a run of separately drawn pictures, each held for a frame or two and re-inked every time, so the lines wobble and the motion steps like a cartoon.

Line boil
Shapes and icons / Hand-drawn & traditional · line-boil

A shape that stays put while its outline is re-wobbled slightly every two or three frames, so the line seems to crawl as though freshly hand-drawn each time.

Stop-motion animation
Shapes and icons / Hand-drawn & traditional · stop-motion-animation

Movement built from a handful of held poses a second, each set down by hand a little differently, so the subject steps along with a choppy, homemade wobble like a clay puppet.

Icon animation

Icon hover bounce
Shapes and icons / Icon animation · icon-hover-bounce

When the pointer reaches an icon, the icon briefly swells and rocks, then wobbles back to its resting size and angle on a short spring.

Icon line-to-fill
Shapes and icons / Icon animation · icon-line-to-fill

An icon first appears as a thin outline drawing itself on, then its inside floods solid so the line version becomes the filled version.

Icon state morph
Shapes and icons / Icon animation · icon-state-morph

A line icon switches to a different icon by bending, turning and sliding its own strokes into the new shape, so the change of state reads as one continuous motion.

Isometric

Isometric bar rise
Shapes and icons / Isometric · isometric-bar-rise

Boxes drawn at an isometric angle push up out of a flat floor grid one after another, building a chart or block city that looks three-dimensional.

Isometric rotation
Shapes and icons / Isometric · isometric-rotation

An object drawn in a flat isometric view turns about its upright axis in quarter steps, pausing after each so a different pair of sides faces the viewer every time.

Lines & strokes

Bezier handle bend
Shapes and icons / Lines & strokes · bezier-handle-bend

A line pinned at both ends flexes into smooth arcs and S-shapes as the control handles of its curve swing out and back.

Line-to-polygon transform
Shapes and icons / Lines & strokes · line-to-polygon-transform

A straight line bends at its joints, corner by corner from the ends inwards, until its two ends meet and it closes into a polygon.

Marching ants
Shapes and icons / Lines & strokes · dashed-line-march

A dashed outline or line stays where it is while its dashes creep steadily along it, like a column of ants on the move.

Offset path expansion
Shapes and icons / Lines & strokes · offset-path-expansion

Outlines of a shape grow out from its edge one after another, each settling a fixed distance further out, so the shape ends up ringed by evenly spaced contours.

Path follow motion
Shapes and icons / Lines & strokes · path-follow-motion

An object travels along a drawn curve, turning as it goes so it always points the way the curve is going.

Pucker and bloat
Shapes and icons / Lines & strokes · pucker-and-bloat

A shape distortion that drives its corners and its sides in opposite directions, so a polygon either sharpens into a pinched star or swells into rounded petals.

Ribbon sweep
Shapes and icons / Lines & strokes · ribbon-sweep

Thick coloured ribbons streak across the screen one after another until they cover it, then trail off the far side to leave the next scene behind.

Speed lines
Shapes and icons / Lines & strokes · speed-lines

Thin straight strokes stream out behind a fast-moving object, growing with its speed and vanishing when it stops.

Wiggle path
Shapes and icons / Lines & strokes · wiggle-path

A drawn line keeps squirming as its points drift on smooth, ever-changing noise, while its overall shape stays the same.

Zig-zag distortion
Shapes and icons / Lines & strokes · zig-zag-distortion

A straight or curved stroke is bent into a row of sharp, evenly spaced teeth whose height and spacing can grow, shrink or shift over time.

Liquid & organic

Brush stroke paint reveal
Shapes and icons / Liquid & organic · brush-stroke-paint-reveal

A broad brush drags across the area in a few back-and-forth passes, and the picture appears only where its rough, bristly stroke has been laid down.

Ink splash spread
Shapes and icons / Liquid & organic · ink-splash-spread

A ragged blot of ink bursts out from one spot, throwing spiky arms and drops, then calms into a rounded, uneven splat that stays.

Liquid fill level
Shapes and icons / Liquid & organic · liquid-fill-level

A shape fills up from the bottom with liquid whose top edge waves and sloshes as it rises, then calms down when it stops.

Morphing blob
Shapes and icons / Liquid & organic · morphing-blob

A soft rounded shape keeps reshaping its edge, bulging out in one place and drawing in at another, so it seems to breathe and wobble on its own.

Logo animation

Coin flip
Shapes and icons / Logo animation · coin-flip

A round logo or badge spins around its upright axis like a tossed coin, thinning to its edge and showing front and back in turn before it slows and lands face-up.

Logo 3D spin reveal
Shapes and icons / Logo animation · logo-3d-spin-reveal

A logo swings round on its upright axis in perspective, its thin edge flashing past, and slows until it comes to rest facing straight out.

Logo build-on reveal
Shapes and icons / Logo animation · logo-build-on-reveal

A logo assembles itself one piece at a time in a set order, the mark first and then each letter, every new part rising into place beside the ones already there.

Logo glitch reveal
Shapes and icons / Logo animation · logo-glitch-reveal

A logo stutters into view like a corrupted signal, sliced and shoved sideways with red and cyan fringes, until the interference dies down and it sits still and clean.

Logo mask wipe reveal
Shapes and icons / Logo animation · logo-mask-wipe-reveal

An angled edge travels across the logo, and the mark appears only on the side the edge has already passed, as if a cover were being slid off it.

Optical & interference

Op-art vibrating pattern
Shapes and icons / Optical & interference · op-art-vibrating-pattern

Dense high-contrast stripes ripple in slightly mismatched waves, so the bands swell and pinch and the whole surface seems to shimmer and buzz before your eyes.

Polygon & tessellation

Delaunay triangle mesh
Shapes and icons / Polygon & tessellation · delaunay-triangle-mesh

Scattered points drift slowly while lines join them into a web of flat-shaded triangles that keep re-forming, so the area looks like a gently shifting faceted surface.

Polygon subdivision
Shapes and icons / Polygon & tessellation · polygon-subdivision

A single polygon is cut into smaller polygons, and each of those is cut again, step by step until the shape becomes a fine mosaic of pieces.

Repeaters & patterns

Halftone dot scaling
Shapes and icons / Repeaters & patterns · halftone-dot-scaling

Dots on an evenly spaced grid each grow or shrink with the brightness beneath them, so a gradient or shape shows up only in their sizes and drifts as those sizes change.

Hexagon tile reveal
Shapes and icons / Repeaters & patterns · hexagon-tile-reveal

Hexagons pop into place one after another, spreading out from a single cell until a honeycomb fills the screen.

Line weave
Shapes and icons / Repeaters & patterns · line-weave

Straight lines strung between matching points on two edges cross one another so densely that a smooth curve appears, and it bends as the edges move.

Linear repeater stagger
Shapes and icons / Repeaters & patterns · linear-repeater-stagger

A line of identical shapes all perform the same move, each starting a beat after the one before, so the motion rolls along the row.

Mograph grid flip
Shapes and icons / Repeaters & patterns · mograph-grid-flip

An image split into a grid of tiles turns over one tile at a time in a sweeping wave, each tile showing a new picture on its back.

Radial repeater
Shapes and icons / Repeaters & patterns · radial-repeater

Many copies of a single shape sit at equal steps around a centre point and move together, so the ring spins, swells or reshapes as one pattern.

Scale tile wave
Shapes and icons / Repeaters & patterns · scale-tile-wave

A grid of tiles that each swell and shrink in place, timed so the growth ripples outward across the grid like a wave.

Spiral bloom
Shapes and icons / Repeaters & patterns · spiral-bloom

Dozens of small shapes unfurl from a single centre point and settle along curving spiral arms, like the seeds of a sunflower spreading out.

Tessellation triangle flip
Shapes and icons / Repeaters & patterns · tessellation-triangle-flip

A surface tiled with triangles turns over piece by piece in a sweeping wave, each triangle spinning on its axis to show a new colour on its back.

Shape morphing

Blob-to-icon morph
Shapes and icons / Shape morphing · blob-to-icon-morph

A loose, wobbling organic shape pulls itself together into the clean outline of a recognisable icon.

Shape assemble from fragments
Shapes and icons / Shape morphing · shape-assemble-from-fragments

Broken shards of a shape start scattered and spinning, then fly inward and snap into place until the shape stands whole.

Shape boolean merge
Shapes and icons / Shape morphing · shape-boolean-merge

Two separate shapes move into each other and fuse into one solid form, the lines where they overlapped disappearing so a single outline remains.

Squircle morph
Shapes and icons / Shape morphing · squircle-morph

A filled square softens its corners into a squircle and keeps rounding until it is a circle, one continuous shape changing its curvature rather than cross-fading.

Superformula morph
Shapes and icons / Shape morphing · superformula-morph

A single closed outline built from one polar equation reshapes itself as the equation's numbers change, flowing from polygon to star to petals.

Tangram rearrangement
Shapes and icons / Shape morphing · tangram-rearrangement

A shape made of a few flat geometric pieces comes apart, and each piece spins and slides into a new spot until together they make a completely different picture.

Sound-reactive

Radial audio visualizer
Shapes and icons / Sound-reactive · sound-reactive-radial-shape

Bars fan out around a circle, each one stretching and shrinking with the loudness of its slice of the sound, so the ring pulses in time with the audio.

Waves & ripples

Ripple rings
Shapes and icons / Waves & ripples · ripple-rings

Thin circles keep spawning at one spot and swell outward, each one growing fainter until it vanishes, the way rings spread after a stone drops into still water.

Sine wave distortion
Shapes and icons / Waves & ripples · sine-wave-distortion

A shape is bent into a smooth wave whose crests keep sliding along it, so it ripples in place without travelling anywhere.

Particles and generative

Audio-reactive

Audio-reactive particles
Particles and generative / Audio-reactive · audio-reactive-particles

A swarm of particles that bursts outward, grows and brightens on each loud beat of the soundtrack, then settles back to a slow drift in the quiet between.

Cellular automata

Brian's Brain
Particles and generative / Cellular automata · brian-s-brain

A grid of cells that flash on, fade for one beat and go dark, so a seeded clump bursts into flickering sparks that scatter outward across the frame.

Conway's Game of Life
Particles and generative / Cellular automata · conway-s-game-of-life

Square cells on a grid switch on and off each step according to how many of their neighbours are lit, so a random scatter boils into blinking, drifting, settling patterns.

Cyclic cellular automaton
Particles and generative / Cellular automata · cyclic-cellular-automaton

A grid of coloured cells where each one advances to the next colour in a loop when a neighbour already holds it, so random static organises itself into rotating spirals.

Falling sand
Particles and generative / Cellular automata · falling-sand

Grains on a pixel grid drop one cell at a time and slide diagonally off anything below, so a pouring stream builds into sloped heaps that overflow ledges.

Langton's ant
Particles and generative / Cellular automata · langton-s-ant

A single walker on a grid flips each square it crosses and turns left or right by that square's colour, scribbling a messy blob that eventually shoots off as a straight diagonal road.

Lenia
Particles and generative / Cellular automata · lenia

Soft glowing blobs on a grid of smoothly varying cells that hold their shape and glide about like tiny organisms, each cell growing or fading by how full the ring around it is.

Rule 110 automaton
Particles and generative / Cellular automata · rule-110-automaton

A line of on and off cells rewrites itself row after row by one simple neighbour rule, stacking into a lattice of triangles and slanted structures that drift across it.

Rule 30 automaton
Particles and generative / Cellular automata · rule-30-automaton

Rows of square cells appear one under another from a single seed cell, each cell switched on or off by a fixed rule on the three above it, spreading into a chaotic triangular pattern.

Electricity

Electric arc
Particles and generative / Electricity · electric-arc

A jagged, glowing streak of electricity jumps between two points and keeps crackling, its zigzag path flickering into a new shape every few frames.

Lightning bolt
Particles and generative / Electricity · lightning-bolt

A crooked, forking streak of glowing light shoots out from a point, stutters on and off for a moment, then dims to nothing.

Emitters

Animated sprite particles
Particles and generative / Emitters · animated-sprite-particles

An emitter whose particles each play their own little frame-by-frame animation, out of step with one another, while they drift across the screen.

Bokeh particles
Particles and generative / Emitters · bokeh-particles

Big blurred circles of coloured light float gently over a dark background, overlapping and slowly brightening and dimming like city lights seen out of focus.

Bubbles
Particles and generative / Emitters · bubbles

Clear, glinting spheres float upward on a swaying path, swelling slightly as they go, and burst when they reach the top.

Confetti
Particles and generative / Emitters · confetti

Little flat paper pieces in a few colours drift down the screen, swaying and turning over so each one flickers between its full face and a thin edge.

Dust motes
Particles and generative / Emitters · dust-motes

Tiny bright specks float lazily in the air, wandering and glinting as they pass through a beam of light.

Embers
Particles and generative / Emitters · embers

Tiny glowing sparks drift upward as if off a fire, wavering on the heat and cooling from bright yellow to dim red before they wink out.

Falling leaves
Particles and generative / Emitters · falling-leaves

Leaf shapes drift down the frame, each swinging side to side and turning over as it tumbles, like leaves coming off a tree in a light breeze.

Fireflies
Particles and generative / Emitters · fireflies

Little points of warm light drift around on loose, wandering paths, each one fading up and going dark again on its own uneven timing.

Fireworks
Particles and generative / Emitters · fireworks

Bright sparks shoot up into a dark sky and pop into rings of glowing embers that spread out, sag under gravity and flicker away.

Fountain
Particles and generative / Emitters · fountain

A stream of particles leaves one point heading upward, bends over under gravity and rains back down around its source.

Glitter pour
Particles and generative / Emitters · glitter-pour

A steady trickle of tiny shiny flakes falls from one spot, flashing as they tumble, and builds into a glittering mound on the floor.

Meteor shower
Particles and generative / Emitters · meteor-shower

Slanted streaks of light shoot across a night sky one after another at uneven moments, each a bright point dragging a tail that fades away behind it.

Particle trail
Particles and generative / Emitters · particle-trail

A moving point leaves a stream of tiny dots behind it that scatter, shrink and fade away, tracing where it has been.

Path emitter
Particles and generative / Emitters · path-emitter

Particles spawn along a line or curve, often from a head that travels it, then drift away and fade so the shape is traced in sparks.

Pollen drift
Particles and generative / Emitters · pollen-drift

A constant scatter of tiny glowing specks floats across the frame on a gentle breeze, each swaying on its own path and fading in and out, the closer ones larger and faster.

Rainfall
Particles and generative / Emitters · rainfall

Thin slanted streaks pour down the frame in layers of depth, the nearer ones brighter and faster, splashing where they strike the ground.

Smoke puffs
Particles and generative / Emitters · smoke-puffs

A source keeps releasing soft, half-transparent blobs that swell, float upward and fade away, piling over each other into a rolling column of smoke.

Snowfall
Particles and generative / Emitters · snowfall

Soft white dots drift down the frame at different depths, the closer ones larger, brighter and quicker, each wobbling a little from side to side as it falls.

Sparks
Particles and generative / Emitters · sparks

A stream of tiny glowing streaks shoots out of one hot point, curves downward as it flies and burns out in well under a second.

Fire & plasma

Doom-style fire
Particles and generative / Fire & plasma · doom-style-fire

Chunky retro pixels of heat rise from a blazing bottom edge, each row cooling and drifting at random, so jagged flames flicker up from white through yellow and orange to red and black.

Sine plasma
Particles and generative / Fire & plasma · sine-plasma

Several overlapping sine waves are added up and run through a colour ramp, so the whole frame fills with soft, glowing bands that ooze and swirl into each other.

Texture tunnel
Particles and generative / Fire & plasma · texture-tunnel

A tiled texture lines the inside of an endless tube that the camera rushes down, the pattern pouring out of a dark point in the middle and sweeping past the edges.

Fluids

Ink in water
Particles and generative / Fluids · ink-in-water

A drop of dye falls into still water and sinks, its leading edge rolling outward into curling, smoky plumes while a thin wispy trail hangs behind it.

Kรกrmรกn vortex street
Particles and generative / Fluids · k-rm-n-vortex-street

A stream flowing past a round obstacle curls into swirls that break away from alternate sides and float downstream in two staggered rows.

Smoke simulation
Particles and generative / Fluids · smoke-simulation

Soft smoke pours out of a source and rises, rolling into curls and eddies as a computed fluid carries it and it thins away.

SPH fluid
Particles and generative / Fluids · sph-fluid

A body of liquid built from many small particles that push away from crowded neighbours, so it pours, splashes off walls and sloshes to rest like real water.

Forces

Elastic collisions
Particles and generative / Forces · elastic-collisions

Balls ricochet off the walls and off one another without ever slowing down, big ones knocking small ones away as if they were billiard balls.

Gravity well attraction
Particles and generative / Forces · gravity-well-attraction

A scatter of particles is drawn toward a single point, gathering speed as it nears, whirling round it and spiralling down into the centre.

Spring return
Particles and generative / Forces · spring-return

Particles shoved out of position by a force swing back toward where they started, overshoot it and wobble to a stop as if each were tethered to its spot by a spring.

Turbulence field
Particles and generative / Forces · turbulence-displacement

Each particle is shoved about by a smoothly varying random force that shifts over time, so the swarm churns wildly yet neighbouring points still drift together.

Wind field
Particles and generative / Forces · wind-field

Loose particles are swept along by an invisible wind that swings direction and surges in strength from one spot to the next as it blows.

Fractals

Barnsley fern
Particles and generative / Fractals · barnsley-fern

A dot jumps around at random under a few stretch-and-shift rules, and the trail of every spot it lands on fills in, speck by speck, the shape of a fern frond.

Burning Ship fractal
Particles and generative / Fractals · burning-ship-fractal

A Mandelbrot-style escape-time picture whose folded formula grows a jagged, flame-coloured ship shape, usually shown diving into ever smaller copies of itself.

Dragon curve
Particles and generative / Fractals · dragon-curve

A straight line keeps doubling by swinging a copy of itself a quarter turn around its end, until the right-angled path crinkles into a jagged dragon silhouette.

Hilbert curve
Particles and generative / Fractals · hilbert-curve

A single continuous line winds through every cell of a square grid, each step splitting its turns into four smaller copies until it fills the square.

Julia set morph
Particles and generative / Fractals · julia-set-morph

A Julia fractal whose constant drifts over time, so its lacy outline continuously reshapes from blobs into spirals and back.

Koch snowflake
Particles and generative / Fractals · koch-snowflake

A triangle outline that keeps pushing a small pointed tooth out of the middle of every edge, round after round, until it becomes an intricately spiky snowflake.

Mandelbrot zoom
Particles and generative / Fractals · mandelbrot-zoom

The view plunges steadily into the ragged edge of the Mandelbrot set, filaments and baby bulbs blooming out of nowhere until a tiny copy of the whole shape appears.

Mandelbulb raymarch
Particles and generative / Fractals · mandelbulb-raymarch

A lumpy three-dimensional fractal whose bulbs sprout smaller bulbs without end, rendered as a lit solid by stepping rays toward its surface, turning slowly in space.

Sierpinski gasket
Particles and generative / Fractals · sierpinski-gasket

A dot repeatedly leaps half the distance to a randomly picked corner of a triangle, and the trail of landings grows into a triangle riddled with nested triangular holes.

Growth & L-systems

L-system plant
Particles and generative / Growth & L-systems · l-system-plant

A plant made of branching lines grows up from a single stem, splitting again and again by a simple repeated rule until it fans out into a full, budding shrub.

Phyllotaxis
Particles and generative / Growth & L-systems · phyllotaxis

Dots are added one by one, each turned about 137.5 degrees from the last and set a little further out, so a round seed head grows from the centre with interlocking spiral arms.

Recursive tree
Particles and generative / Growth & L-systems · recursive-tree

A trunk grows and forks into two smaller branches, and each of those forks again at the same angle and scale, level after level, until a full branching canopy has drawn itself.

Interaction fields

Cymatics
Particles and generative / Interaction fields · cymatics

Grains spread over a vibrating plate jiggle away from the parts that move and pile up along the lines that stay still, so a symmetric pattern draws itself out of the noise.

Dot grid displacement
Particles and generative / Interaction fields · dot-grid-displacement

A pointer moving over a regular grid of dots shoves the nearby dots outward, less the farther away they sit, and the grid eases back into rows once it passes.

Moire pattern
Particles and generative / Interaction fields · moire-pattern

Two fine repeating patterns of lines or rings sit on top of each other, and nudging one slightly makes large wavy bands of light and dark ripple across the whole picture.

Random walk
Particles and generative / Interaction fields · random-walk

A dot hops in a fresh random direction every moment, scribbling a tangled, zig-zag trail that wanders off and gradually fills a region of the screen.

Metaballs & blobs

Gooey filter
Particles and generative / Metaballs & blobs · gooey-filter

Separate round dots are softened and then cut back to a hard edge, so whenever two come close they melt into a single liquid shape joined by a stretchy neck.

Lava lamp
Particles and generative / Metaballs & blobs · lava-lamp

Gooey blobs of glowing wax swell off a pool, float slowly up, then sink back down, stretching, splitting and merging with each other as they go.

Marching squares contour
Particles and generative / Metaballs & blobs · marching-squares-contour

A smooth field is sampled on a grid and each cell is cut where the values cross a threshold, tracing a clean outline around blobs that merge and split as they move.

Noise & fields

Curl noise flow
Particles and generative / Noise & fields · curl-noise-flow

A dense field of particles streams along curling, eddying currents that never pile up or leave gaps, so the whole frame churns like stirred smoke or ink in water.

Domain warping
Particles and generative / Noise & fields · domain-warping

A noise pattern is sampled at positions that further noise keeps shoving around, so soft clouds fold into flowing marble or smoke swirls.

Flow field
Particles and generative / Noise & fields · flow-field

Thousands of particles drift along a hidden map of directions, and the streaks they leave bend together into smooth currents that reveal the shape of the field.

Fractal Brownian motion
Particles and generative / Noise & fields · fractal-brownian-motion

Copies of smooth noise at ever finer sizes and ever weaker strengths are stacked together, turning soft blobs into cloudy, craggy texture with detail at every scale.

Isolines contour animation
Particles and generative / Noise & fields · isolines-contour-animation

Thin lines trace equal values of a hidden, changing field, so the rings drift, swell, pinch together and break apart like a topographic map of shifting ground.

Magnetic field lines
Particles and generative / Noise & fields · magnetic-field-lines

Curved strands sweep out of one magnetic pole and bend round into the other, each following the pull of the field, so they draw the classic looping pattern of a bar magnet.

Perlin noise field
Particles and generative / Noise & fields · perlin-noise-field

An area is filled with soft, organic blotches of light and dark that blend smoothly into each other and slowly churn and reshape over time.

Streamlines
Particles and generative / Noise & fields · streamlines

Many thin curves follow the direction of an invisible current from point to point, together sketching how the flow bends and where it goes.

Worley cellular noise
Particles and generative / Noise & fields · worley-cellular-noise

A pattern of rounded cells, each glowing at a scattered seed point and darkening toward the seams where it meets its neighbours, like cracked stone or foam.

Particle text & images

Image to particles
Particles and generative / Particle text & images · image-to-particles

A picture is broken into a grid of small particles, each tinted with the colour of the pixel it stands for, which fly in from a scattered cloud and lock into place to rebuild the image.

Particle morph
Particles and generative / Particle text & images · particle-morph

A filled shape built from hundreds of small dots swirls apart and regathers, every dot travelling to its place in a new shape.

Particle text formation
Particles and generative / Particle text & images · particle-text-formation

A cloud of tiny specks spread across the frame streams together until the specks sit in the shape of a word.

Reaction & growth

Differential growth
Particles and generative / Reaction & growth · differential-growth

A closed line that keeps getting longer while its points shove each other away, so it wrinkles into tighter and tighter winding folds like coral or a brain.

Diffusion-limited aggregation
Particles and generative / Reaction & growth · diffusion-limited-aggregation

Drifting particles freeze the moment they bump into a growing clump, which spreads outward as a branching, frost-like fractal.

Eden growth
Particles and generative / Reaction & growth · eden-growth

A blob of square cells grows outward from one seed as new cells are added one by one at random spots along its edge, filling in solid with a rough, jittery outline.

Reaction-diffusion
Particles and generative / Reaction & growth · reaction-diffusion

A few dots grow, split and curl into worm-like stripes that keep spreading until an organic maze pattern covers the frame.

Space colonization
Particles and generative / Reaction & growth · space-colonization

Branches sprout from a seed and fork toward a scattered field of target points, consuming each one they reach until a vein-like network fills the shape.

Rigid bodies

Domino toppling
Particles and generative / Rigid bodies · domino-toppling

A line of standing tiles goes over in turn, each one tipping into its neighbour and knocking it down, until the whole row lies leaning in a slanted stack.

Fracture shatter
Particles and generative / Rigid bodies · fracture-shatter

A solid object takes a hit, splits along cracks into hard-edged pieces, and the pieces fly off, tumble under gravity and settle into a pile.

Galton board
Particles and generative / Rigid bodies · galton-board

Many small balls pour through rows of pegs, each nudged left or right at random, and stack up in bins so the piles trace a bell curve.

Newton's cradle
Particles and generative / Rigid bodies · newton-s-cradle

Balls hanging in a touching row pass a swing along the line: one end ball drops in and stops dead, the far end ball leaps out and back, and the ones between stay still.

Rigid body pile
Particles and generative / Rigid bodies · rigid-body-pile

Solid boxes tumble down one after another, crash into the ground and into each other, and come to rest as a lopsided heap that can tip and slide.

Sand & granular

Sandpile avalanche
Particles and generative / Sand & granular · sandpile-avalanche

Grains land one by one on a grid of little stacks, and any stack that grows too tall spills onto its neighbours, setting off chain-reaction slides that are sometimes tiny and sometimes huge.

Soft bodies & cloth

Mass-spring cloth
Particles and generative / Soft bodies & cloth · mass-spring-cloth

A sheet built from a grid of small weights joined by springs, so it sags, drapes, flutters in the wind and swings loose when one of its pins is released.

Ragdoll
Particles and generative / Soft bodies & cloth · ragdoll

A figure made of stiff limbs on loose joints loses whatever was holding it up and drops like a puppet with its strings cut, tumbling and folding into a heap where it lands.

Springs network
Particles and generative / Soft bodies & cloth · springs-network

A mesh of dots joined by springy links, where knocking one dot sends a ripple of stretching and squashing through the whole net until it wobbles back into shape.

Verlet rope
Particles and generative / Soft bodies & cloth · verlet-rope

A line built from many short links that never stretch falls from where it is pinned, swings loosely under gravity and drapes itself over anything it hits.

Space

N-body gravity
Particles and generative / Space · n-body-gravity

Several masses all tug on one another at once, so they loop around each other, whip past on near misses and drag smaller particles into swirling orbits.

Spiral galaxy
Particles and generative / Space · spiral-galaxy

Thousands of tiny star dots trace curved arms out from a glowing centre, and the whole disk slowly turns, its inner stars circling faster than the outer ones.

Starfield
Particles and generative / Space · starfield

Stars spread through depth rush out from a central point toward the edges of the frame, growing brighter as they near and stretching into streaks as the speed rises.

Two-body orbit
Particles and generative / Space · two-body-orbit

A small body loops round a heavier one on an oval path, drifting slowly at the far end and sweeping fast past the heavy body at the near end.

Strange attractors

Clifford attractor
Particles and generative / Strange attractors · clifford-attractor

A single point is bounced over and over through a small sine-and-cosine formula, and the places it lands build up into a glowing, swirling ribbon of density.

De Jong attractor
Particles and generative / Strange attractors · de-jong-attractor

A single point hops endlessly under a simple trig formula, and the places it lands, piled up as glowing density, build a delicate tangle of curling ribbons.

Hopalong attractor
Particles and generative / Strange attractors · hopalong-attractor

A single point jumps again and again by a simple square-root rule, and the dots it leaves behind pile up into nested, mirrored loops like a lace doily.

Lorenz attractor
Particles and generative / Strange attractors · lorenz-attractor

A single glowing line traces a never-repeating path that loops around one wing and then the other, gradually drawing a butterfly-shaped figure eight in 3D.

Rossler attractor
Particles and generative / Strange attractors · rossler-attractor

A glowing point spirals outward on a flat disc, gets thrown up into a looping fold and drops back to the middle, its trail weaving a twisted band that never exactly repeats.

Thomas attractor
Particles and generative / Strange attractors · thomas-attractor

A single glowing point traces a never-repeating path through a three-fold symmetric flow, its trail building into a tangled three-lobed knot that swirls through the centre.

Swarms & agents

Ant colony pheromone trails
Particles and generative / Swarms & agents · ant-colony-pheromone-trails

Many tiny wandering agents leave a fading scent wherever they carry food home, and the rest follow the strongest scent, so bright paths emerge between a nest and its food.

Boids flocking
Particles and generative / Swarms & agents · boids-flocking

A crowd of small pointed agents, each reacting only to the ones nearest it, sorts itself from a jumble into a single flock that turns and travels as one.

Kuramoto synchronization
Particles and generative / Swarms & agents · kuramoto-synchronization

A crowd of blinking dots, each on its own slightly different rhythm, gradually nudges itself into time until they all pulse together.

Lotka-Volterra cycles
Particles and generative / Swarms & agents · lotka-volterra-cycles

Two crowds of drifting particles, prey and predators, that swell and thin out in repeating waves, the predators always peaking just after the prey they feed on.

Particle Life
Particles and generative / Swarms & agents · particle-life

Dots of a few colours each follow a simple table saying which colours they move toward and which they back away from, and an even scatter organises itself into clumps, chases and rings.

Physarum slime mold
Particles and generative / Swarms & agents · physarum-slime-mold

A cloud of tiny agents that follow and reinforce each other's trails, so a speckled haze draws itself into a glowing web of veins whose busy paths thicken and quiet ones fade.

Predator avoidance flock
Particles and generative / Swarms & agents · predator-avoidance-flock

A swarm of small moving agents parts and races away from a hunter passing through it, then drifts back together once the hunter has gone.

Seek and arrive steering
Particles and generative / Swarms & agents · seek-and-arrive-steering

Moving agents curve round to head for a target at full speed, then brake gently once they get close so each one glides to a stop right on it.

Social force crowd
Particles and generative / Swarms & agents · social-force-crowd

Many little walkers each head for their own goal while shoving off one another and the walls, so streams sort into lanes and pile up at narrow gaps.

Wander steering
Particles and generative / Swarms & agents · wander-steering

Little agents roam the frame on their own, each steering towards a point that drifts randomly on a circle just ahead of it, so they swerve in smooth, lifelike curves.

Terrain

Noise terrain flyover
Particles and generative / Terrain · noise-terrain-flyover

A camera glides low over a mesh of hills shaped by smooth random noise, the ridges emerging from the horizon haze and rolling toward and beneath the viewer.

Wireframe terrain
Particles and generative / Terrain · wireframe-terrain

A mesh of grid lines laid over rolling hills in perspective, the landscape streaming steadily toward the camera as if flying low over it.

Tiling & patterns

Circle packing
Particles and generative / Tiling & patterns · circle-packing

Small dots scattered over an area swell to different sizes, nudging one another aside, until the whole area is filled with snugly touching circles.

Maze carving
Particles and generative / Tiling & patterns · maze-carving

A cursor wanders through a grid of boxed-in squares, breaking down the wall in front of it and backing up at dead ends, until every square is linked into one finished maze.

Penrose tiling
Particles and generative / Tiling & patterns · penrose-tiling

Two kinds of rhombus, one wide and one slim, lock together into a star-shaped, five-fold pattern that spreads across the frame without ever repeating.

Recursive rectangle subdivision
Particles and generative / Tiling & patterns · recursive-rectangle-subdivision

One rectangle is cut in two at an off-centre point, and its pieces keep being cut the same way, until it has become a grid of blocks of every size.

Truchet tiles
Particles and generative / Tiling & patterns · truchet-tiles

A grid of square tiles, each carrying the same pair of corner arcs turned one of two ways, whose arcs link up into flowing maze-like lines that re-route as tiles rotate.

Voronoi cells
Particles and generative / Tiling & patterns · voronoi-cells

Scattered points each claim the patch of space closer to them than to any other point, tiling the frame with polygons whose borders shift as the points wander.

Voronoi relaxation
Particles and generative / Tiling & patterns · voronoi-relaxation

Bunched-up points each claim the area closest to them, then keep sliding to the centre of their own patch until the cells even out into a calm, cell-like tiling.

Wave function collapse
Particles and generative / Tiling & patterns · wave-function-collapse

A grid of undecided cells settles one cell at a time, each pick narrowing what its neighbours may become, until a seamless tiled pattern covers the whole grid.

Water & light

Dam break
Particles and generative / Water & light · dam-break

A tall block of water held at one end of a tank is released and slumps into a fast surge that runs along the floor, crashes up the far wall and sloshes back.

Height-field ripples
Particles and generative / Water & light · height-field-ripples

A surface made of a grid of heights is simulated as water, so each drop dents it into rings that spread, bounce back off the edges and cross one another before settling.

Ocean waves
Particles and generative / Water & light · ocean-waves

A water surface swells and rolls as several waves cross it at once, their crests pinched to sharp ridges between wide, smooth troughs.

Water caustics
Particles and generative / Water & light · water-caustics

A shifting net of bright, wavy light lines plays across a surface, like sunlight bent through moving water onto the bottom of a pool.

Camera moves

3D motion

Bend deformer
Camera moves / 3D motion · bend-deformer

A flat plane in 3D is wrapped onto an arc about an axis across it, curving smoothly from flat into a curl or tube while keeping its length.

Beveled 3D text
Camera moves / 3D motion · beveled-3d-text

Lettering built as a thick solid with softly rounded front edges, lit so the bevels facing the light gleam and the rest fall into shade as the word turns.

Card deck fan
Camera moves / 3D motion · card-deck-fan

A tidy pile of cards opens into an arc, every card tilting about a common point below so they splay out like a hand of playing cards.

Cloner grid
Camera moves / 3D motion · cloner-grid

A single 3D block is repeated into a grid of rows and columns on a floor, and a moving wave or field lifts and recolours the copies while the camera circles the whole array.

Displacement map
Camera moves / 3D motion · displacement-map

A greyscale image raises a flat surface point by point, light areas pushing up and dark ones staying low, so the flat picture grows into a 3D relief.

Effector-driven instances
Camera moves / 3D motion · effector-driven-instances

A field of identical 3D copies where a moving zone of influence lifts, swells, turns and recolours each copy by how near it is, leaving a travelling bump in the set.

Exploded view
Camera moves / 3D motion · exploded-view

A built-up 3D object pulls apart along one axis, its layers spreading out with gaps between them so each part and where it fits can be seen.

Extrusion
Camera moves / 3D motion · extrusion

A flat outline is pushed back into space so solid side walls sweep out behind it, and the thickness keeps growing until the shape reads as a solid slab.

Hologram effect
Camera moves / 3D motion · hologram-effect

An object rendered in a single glowing colour, partly see-through and striped with fine scanlines, that flickers like light beamed into the air.

Infinite perspective grid
Camera moves / 3D motion · infinite-perspective-grid

A floor of grid lines runs out to a far horizon and keeps sliding toward the camera, so it feels like gliding forward over it forever.

Isometric view
Camera moves / 3D motion · isometric-view

The scene is seen without perspective from a corner angle where all three axes look equally shortened and 120 degrees apart, so parallel edges stay parallel.

Low-poly faceting
Camera moves / 3D motion · low-poly-faceting

A 3D shape is made of a few large triangles, each painted one solid shade by how it faces the light, so it turns like a cut gem with crisp facets instead of smooth shading.

Noise vertex wobble
Camera moves / 3D motion · noise-vertex-wobble

A 3D shape keeps bulging and sinking all over as its surface points are nudged in and out by smoothly changing noise, so it looks soft and alive.

Point cloud reveal
Camera moves / 3D motion · point-cloud-reveal

A 3D object first appears only as a lattice of dots on its surface, then a sweep fills those dots in until it stands as a solid, shaded form.

Sphere-to-grid morph
Camera moves / 3D motion · sphere-to-grid-morph

Many small tiles sitting on the surface of a turning ball fly through depth and settle into a flat, evenly spaced grid that faces the viewer.

Taper deformer
Camera moves / 3D motion · taper-deformer

An object is scaled more and more along one axis, so one end keeps its size while the other squeezes in towards a point or flares out wider.

Tesseract rotation
Camera moves / 3D motion · tesseract-rotation

A wireframe four-dimensional cube turns through its extra axis, so the small inner cube swells outward and the big outer cube folds inward until they trade places.

Turntable rotation
Camera moves / 3D motion · turntable-rotation

A solid object turns round its upright axis at an even pace, as if on a record player, showing its front, sides and back in turn.

Twist deformer
Camera moves / 3D motion · twist-deformer

A solid block winds round its own upright axis, each level turned a little more than the one below, so it spirals up like a wrung-out cloth and then unwinds.

Voxel build
Camera moves / 3D motion · voxel-build

A 3D model made of little cubes puts itself together one cube at a time, each dropping into its slot from the ground up, while the camera slowly circles it.

Wave deformer
Camera moves / 3D motion · wave-deformer

A flat 3D sheet is pushed up and down by a regular sine wave whose crests keep rolling across it, so the surface undulates in place like cloth or water.

Wireframe reveal
Camera moves / 3D motion · wireframe-reveal

A 3D object shows up first as a see-through skeleton of lines, then solid shaded surfaces fill in over that skeleton until the object looks finished.

X-ray view
Camera moves / 3D motion · x-ray-view

An object's solid outside fades to a glassy ghost of itself, letting the parts built inside it show through.

Camera moves

Crane shot
Camera moves / Camera moves · crane-shot

The camera lifts up through the air in a smooth curve while angling down, so the subject stays centred but is seen from ever higher above.

Dolly in and out
Camera moves / Camera moves · dolly-in-and-out

The camera travels forward toward the subject and then back again, so close objects grow and drift apart faster than distant ones as the depth of the scene opens up.

Drone flyover
Camera moves / Camera moves · drone-flyover

The camera cruises forward high above the ground, angled down, so a wide landscape pours in from the horizon and slides away underneath it.

Dutch angle
Camera moves / Camera moves · dutch-angle

The camera tips sideways about its lens, so the horizon and the upright lines in the shot sit on a slant and the picture feels off balance.

Fly-through
Camera moves / Camera moves · fly-through

The camera glides forward along a route through a 3D space, slipping between and under the objects around it as they rush past the edges of the frame.

Follow cam
Camera moves / Camera moves · follow-cam

The view chases a moving subject a beat behind it, so the subject stays roughly centred while the scenery slides past around it.

Handheld shake
Camera moves / Camera moves · handheld-shake

The whole picture drifts, bobs and tilts by a few pixels in a restless, uneven way, so the shot feels filmed by someone holding the camera rather than from a fixed mount.

Hyperlapse
Camera moves / Camera moves · hyperlapse

The camera glides smoothly through a place while time races by around it, so hours of light, weather, crowds and traffic pass in the few seconds the move takes.

Ken Burns effect
Camera moves / Camera moves · ken-burns-effect

A still picture fills the screen while the view creeps across it and gently pushes in, so a photo moves like footage.

Look-around
Camera moves / Camera moves · look-around

The camera stays in one spot and swivels to look in every direction, so a scene that surrounds it on all sides slides past and comes back round to where it started.

Oner
Camera moves / Camera moves · oner

The camera carries the viewer from one subject to the next in a single unbroken move, so the whole sequence plays without a single cut.

Optical zoom
Camera moves / Camera moves · optical-zoom

The camera holds its spot while its lens tightens or widens, so the whole picture grows or shrinks evenly toward its centre without the depth in it shifting at all.

Orbit shot
Camera moves / Camera moves · orbit-shot

The camera swings round a subject on a curved path while staying pointed at it, so the subject holds the centre as its other sides turn into view and the surroundings sweep past.

Pan
Camera moves / Camera moves · pan

The camera stays put but swings to one side, so the whole scene glides sideways across the frame and new parts of it come into view.

Pedestal
Camera moves / Camera moves · pedestal

The camera rises or sinks straight up and down while still looking level, so the scene slides down or up past a fixed horizon, nearby things fastest.

POV shot
Camera moves / Camera moves · pov-shot

The camera sits where a character's eyes are and moves as their head does, so the audience sees the scene exactly as that character does.

Push-in
Camera moves / Camera moves · push-in

The camera glides steadily forward toward the subject, which grows to fill more of the frame while the things around it, further back, swell less and slide outward.

Tilt
Camera moves / Camera moves · tilt

The camera keeps its place but pivots to look higher or lower, so the still scene glides down or up through the frame.

Tracking shot
Camera moves / Camera moves · tracking-shot

The camera travels alongside a moving subject at its pace, keeping it fixed in frame while the scenery slides by behind it.

Truck
Camera moves / Camera moves · truck

The camera glides sideways past the scene without turning, so close things sweep across the frame quickly while the background barely drifts.

Depth

2.5D photo parallax
Camera moves / Depth · two-point-five-d-photo-parallax

A single still photo is cut into depth slices from a depth map, and as the camera drifts the near slices slide further than the far ones, so the flat picture seems to have depth.

Atmospheric fog
Camera moves / Depth · atmospheric-fog

Things farther from the camera are washed toward a single haze colour, so the distance goes pale and flat while the foreground keeps its contrast.

Bokeh highlights
Camera moves / Depth · bokeh-highlights

Tiny points of light melt out of focus into soft, see-through discs in the shape of the lens opening, the farther from focus the bigger and fainter each one grows.

Depth of field
Camera moves / Depth · depth-of-field

Only things at one chosen distance from the camera stay crisp, while everything nearer or farther goes softer the further it is from that distance.

Depth slicing
Camera moves / Depth · depth-slicing

An object is shown as a stack of flat cross-sections that switch on one at a time at increasing depth while the camera glides forward into them, exposing what is inside.

Layered fog bands
Camera moves / Depth · layered-fog-bands

Soft horizontal strips of mist sit between the near and far layers of a scene, each sliding sideways at its own speed, so the picture gains a sense of deep, hazy air.

Multiplane camera
Camera moves / Depth · multiplane-camera

Flat layers of artwork are stacked at different distances from the lens, so when the camera moves past or into them the near layers shift and grow more than the far ones.

Parallax layers
Camera moves / Depth · parallax-layers

A scene built from flat cut-out layers pans sideways, the distant layers creeping slowly and the close ones sweeping past quickly, so a flat picture feels deep.

Rack focus
Camera moves / Depth · rack-focus

With the frame held still, the sharp zone glides from one subject to another at a different distance, blurring the first as the second comes clear.

Tilt-shift miniature
Camera moves / Depth · tilt-shift-miniature

Only a thin level strip of the picture is in focus and everything above and below it melts into blur, so a real wide view looks like a tiny model town.

Lens

Anamorphic squeeze
Camera moves / Lens · anamorphic-squeeze

A picture squashed narrow, so round lights look like tall ovals, stretches out sideways into a wide letterboxed frame, often with long thin blue flares through the bright spots.

Focus breathing
Camera moves / Lens · focus-breathing

When the focus shifts between near and far subjects, the framing quietly swells or shrinks along with it, as if the lens nudged its zoom.

Lens distortion
Camera moves / Lens · lens-distortion

The whole picture bulges out from its centre or pinches in toward it, so straight lines curve more and more the nearer they sit to the edge of the frame.

Vignette
Camera moves / Lens · vignette

The corners and edges of the frame fade softly into shadow while the centre stays bright, drawing the eye inward.

Lighting & surface

Bloom
Camera moves / Lighting & surface · bloom

The brightest shapes in the frame spill a soft haze of their own colour into the dark around them, as though too much light reached the lens.

Caustics
Camera moves / Lighting & surface · caustics

Light bent by a moving, uneven surface such as water gathers into a net of bright, wavering lines that crawl across whatever lies underneath.

Chromatic dispersion
Camera moves / Lighting & surface · chromatic-dispersion

The image breaks into rainbow fringes that are barely there at the centre and grow wider towards the edges of the frame, like light bent through a prism or a soft lens.

Chrome reflection
Camera moves / Lighting & surface · chrome-reflection

A mirror-polished object shows the scene around it painted onto its surface, bent by its shape, so things around it curve and squeeze toward its edges as they move.

Day-night cycle
Camera moves / Lighting & surface · day-night-cycle

A scene stays put while its sky, light colour and brightness slide from bright daylight through a warm sunset into a dark, starry night.

Glass refraction
Camera moves / Lighting & surface · glass-refraction

A clear glass shape passes over the picture and everything behind it looks bent, magnified and flipped through the glass, as if seen through a real lens.

God rays
Camera moves / Lighting & surface · god-rays

A bright light hidden behind a solid shape throws visible beams out through every gap around it, like sunlight cutting through dusty air.

Lens flare
Camera moves / Lighting & surface · lens-flare

A bright light in the shot glows with a soft halo and a thin sideways streak, while a row of faint coloured circles mirrors it across the middle of the frame.

Light painting
Camera moves / Lighting & surface · light-painting

A glowing point of light sweeps across a dark frame and leaves an unbroken bright line everywhere it has been, the way a slow shutter records a moving torch.

Lightning flash
Camera moves / Lighting & surface · lightning-flash

A forked bolt cracks across a dark scene while the whole picture blinks bright white, flickers, and then sinks back into darkness with the bolt glowing a moment longer.

Rim light
Camera moves / Lighting & surface · rim-light

A dark subject is outlined by a thin bright edge on the side facing a light placed behind it, which lifts its shape clear of the background.

Shadow play
Camera moves / Lighting & surface · shadow-play

Shapes held between a lamp and a wall throw dark silhouettes onto it, and as they move, turn or near the light their shadows swell, slide and soften.

Spotlight follow
Camera moves / Lighting & surface · spotlight-follow

The scene is kept dark except for a soft circle of light that chases a moving subject, trailing slightly behind it and revealing whatever it sweeps across.

Subsurface scattering glow
Camera moves / Lighting & surface · subsurface-scattering-glow

A light behind a semi-transparent object shines through its thinnest edge, which glows warmly and fades softly inward, as if the material held the light inside it.

Thin-film iridescence
Camera moves / Lighting & surface · thin-film-iridescence

A surface is washed with rainbow bands, like a soap bubble or a slick of oil, and the colours slide and swap as the viewing angle or the film beneath them shifts.

Shader looks

Cross-hatch shading
Camera moves / Shader looks · cross-hatch-shading

A form is shaded only with crossing sets of fine ink lines, sparse where light falls and packed into a dense, thick mesh in the shadows, like a pen or engraving drawing.

Droste effect
Camera moves / Shader looks · droste-effect

A frame shows a shrunken copy of itself set inside it, which holds a smaller copy again, and the view keeps pushing into that tunnel of pictures without end.

Fresnel edge glow
Camera moves / Shader looks · fresnel-edge-glow

A round object stays dark where it faces you and lights up towards its outline, glowing brightest right at the edge as if light were grazing off its curved sides.

Gooch shading
Camera moves / Shader looks · gooch-shading

A 3D object is shaded by colour temperature rather than brightness, going warm yellow where it faces the light and cool blue where it turns away, with a dark outline round it.

Ink outline
Camera moves / Shader looks · ink-outline

A 3D object is drawn with a bold dark line tracing its outer edge and thinner lines along its sharp folds, so it reads like an inked cartoon as it turns.

Matcap shading
Camera moves / Shader looks · matcap-shading

A 3D form takes all its colour and shine from one painted image of a lit ball, picked by which way each bit of surface faces, so the highlights stay fixed to the camera as the form turns.

Parallax occlusion mapping
Camera moves / Shader looks · parallax-occlusion-mapping

A flat textured surface looks deeply carved because each pixel traces the view ray down into a height map, so raised bits shift and hide what lies behind them as the camera moves.

Raymarched SDF shapes
Camera moves / Shader looks · raymarched-sdf-shapes

Glossy 3D solids are drawn from distance formulas, pixel by pixel, so they can glide into each other and fuse like soft wax before pulling apart again.

Visual effects

Blend & composite

Difference blend
Visual effects / Blend & composite · difference-blend

A layer is laid over another so that each pixel shows how far apart the two are, turning matching areas black and making only the mismatches shine.

Emboss
Visual effects / Blend & composite · emboss

The image becomes a flat grey surface where every outline is raised, lit bright on one side and shaded on the other, like a stamped metal plate.

Multiply blend
Visual effects / Blend & composite · multiply-blend

A layer is laid over the picture so that its colours tint and deepen whatever sits underneath, with its white parts vanishing and overlaps getting darker.

Screen blend
Visual effects / Blend & composite · screen-blend

A layer is combined with the picture beneath so that its black vanishes and its bright parts lighten what shows through, as if two projectors shone on the same wall.

Unsharp mask
Visual effects / Blend & composite · unsharp-mask

A soft image is crisped up by taking away a blurred copy of itself, which brightens the light side of every edge and darkens the dark side, leaving glowing halos when pushed too far.

Blur & focus

Gaussian blur
Visual effects / Blur & focus · gaussian-blur

Everything in the picture is softened evenly, each point smeared into a smooth haze around it, so detail and edges melt away as the blur radius grows.

Motion blur
Visual effects / Blur & focus · motion-blur

Anything moving is smeared along its own path in proportion to its speed, so fast parts streak while slow or still parts stay crisp.

Spin blur
Visual effects / Blur & focus · spin-blur

The picture is smeared along circles around a centre point, so it looks like it is whirling too fast to see, with crisp detail at the hub and streaky rings toward the edge.

Color & grading

Bleach bypass
Visual effects / Color & grading · bleach-bypass

The picture is graded so its colours go muted and steely while the contrast is pushed hard, with deep blacks and bright, harsh highlights.

Cross-processing
Visual effects / Color & grading · cross-processing

A grade that makes a shot look like film run through the wrong developer: contrast cranked up, bright areas gone yellow-green, shadows tinted blue and colours oversaturated.

Desaturation
Visual effects / Color & grading · desaturation

The colour slowly bleeds out of the picture while its shapes and shading stay put, until only greys (or a faint trace of colour) remain.

Duotone
Visual effects / Color & grading · duotone

The image is reduced to its light and dark values and repainted in just two colours, one for the shadows and one for the highlights.

Faded print look
Visual effects / Color & grading · faded-print-look

Footage is graded to resemble a weathered photo print, with muted colour, milky lifted shadows, creamy highlights, a warm yellow cast and a little grain.

LUT color grade
Visual effects / Color & grading · lut-color-grade

Each colour in the shot is swapped for its entry in one fixed table, giving the whole picture a consistent styled look such as cool shadows and warm highlights.

Photographic negative
Visual effects / Color & grading · photographic-negative

Every tone in the picture is flipped to its opposite, so bright areas go dark, dark areas go bright and each colour turns into its complement.

Sepia tone
Visual effects / Color & grading · sepia-tone

A picture loses its colour and is redrawn in warm browns, dark umber in the shadows and pale cream in the highlights, so it looks like an aged photograph.

Solarization
Visual effects / Color & grading · solarization

The brightest parts of the picture flip to their photographic negative while the darker parts stay as they are, giving a strange half-positive, half-negative image.

CRT & display

CRT curvature
Visual effects / CRT & display · crt-curvature

The picture bows outward like the rounded glass of an old television tube, its corners pulled in and rounded off and falling darker than the centre.

CRT power-off collapse
Visual effects / CRT & display · crt-power-off-collapse

The image flattens into a thin glowing line across the middle of the screen, the line shrinks to a single bright point, and the point winks out.

CRT scanlines
Visual effects / CRT & display · crt-scanlines

Fine dark stripes sit across the whole picture at an even spacing, so it looks like it is being shown on an old tube television.

Phosphor persistence
Visual effects / CRT & display · phosphor-persistence

A bright moving spot leaves a soft glowing streak behind it that fades out within moments, like an old screen still glowing where the beam just passed.

Refresh bar
Visual effects / CRT & display · refresh-bar

A broad, blurry stripe of brighter or dimmer light drifts slowly down the image and loops back to the top, like a TV screen filmed out of sync.

Screen refresh flicker
Visual effects / CRT & display · screen-refresh-flicker

A shadowy band with a bright lower edge keeps sliding down the picture while its brightness wobbles, like an old monitor caught on camera out of sync.

Dissolves

Double exposure
Visual effects / Dissolves · double-exposure

Two pictures are printed on top of each other, each partly see-through, so you read both at once as one layered image.

Distortion & displacement

Heat haze
Visual effects / Distortion & displacement · heat-haze

The scene behind hot air wobbles in thin wavy bands that keep drifting upward, as if seen through the rising heat over a sunbaked road.

Liquify
Visual effects / Distortion & displacement · liquify

A round brush drags through the image and carries the pixels beneath it along its path, smudging shapes like a finger through wet paint.

Refraction ripple
Visual effects / Distortion & displacement · refraction-ripple

A ring of waves spreads out from one point over a still picture, bending everything under it as if seen through rippling glass, and the picture lies flat again once it has passed.

Dithering & quantization

Atkinson dithering
Visual effects / Dithering & quantization · atkinson-dithering

A picture is reduced to just two colours by scattering black and white dots whose density follows its tones, with bright areas washing out clean and dark ones going solid.

Bayer ordered dithering
Visual effects / Dithering & quantization · bayer-ordered-dithering

The image is redrawn in just two colours, its shades of grey turned into a regular grid of dots and crosshatch checks that get denser where the picture is brighter.

Floyd-Steinberg dithering
Visual effects / Dithering & quantization · floyd-steinberg-dithering

An image is reduced to a few flat colours, and the tones it loses come back as a fine scatter of pixels, each pixel passing its colour error on to its neighbours.

Halftone
Visual effects / Dithering & quantization · halftone

The image turns into a grid of ink dots that swell in the dark areas and shrink to specks in the light ones, like a photo printed in a newspaper.

Posterization
Visual effects / Dithering & quantization · posterization

The picture is limited to a handful of tones per colour, so smooth shading turns into flat bands of colour with hard steps between them.

Editing & frame

Letterbox
Visual effects / Editing & frame · letterbox

Black bands slide in over the top and bottom of the shot so the picture that remains looks like a wide cinema frame.

Picture-in-picture
Visual effects / Editing & frame · picture-in-picture

A second, smaller video sits in its own framed, shadowed box in a corner while the main shot keeps playing behind it.

Film & analog

Dust and scratches
Visual effects / Film & analog · dust-and-scratches

Flecks of dirt, stray hairs and thin vertical lines flicker over the picture from frame to frame, as if it were projected from a worn, much-handled film reel.

Film edge frame
Visual effects / Film & analog · film-edge-frame

The shot is framed by a band of dark film stock, punched with rounded sprocket holes and printed with tiny frame numbers, so it looks like one cell of a strip of 35mm film.

Film grain
Visual effects / Film & analog · film-grain

A fine speckle that shimmers over the whole picture and changes every frame, showing most in the mid-tones, so clean digital images look shot on film.

Gate weave
Visual effects / Film & analog · gate-weave

The whole picture never quite sits still, drifting a little sideways and nudging up and down every frame as if run off an old film projector.

Glitch

Channel shuffle
Visual effects / Glitch · channel-shuffle

The red, green and blue parts of a picture swap places with one another, so familiar colours flip into strange false-colour versions of the same image.

Data bending
Visual effects / Glitch · data-bending

The picture looks like a damaged file read back anyway: stretches of it slide sideways with their colours swapped, and rows repeat or turn into flat bars of colour.

Pixel sorting
Visual effects / Glitch · pixel-sorting

Bright stretches of an image are reordered by brightness along each row or column, melting the picture into straight, smeared streaks while its darker shapes hold.

Scanline jitter
Visual effects / Glitch · scanline-jitter

Each thin row of the picture keeps twitching a little to the left or right on its own, so straight upright edges turn ragged and wavy like a shaky old video signal.

Screen tearing
Visual effects / Glitch · screen-tearing

A hard horizontal seam slices the picture so the part below it lags a moment behind the part above, and anything moving sideways is broken into offset halves along the line.

Signal dropout
Visual effects / Glitch · signal-dropout

Thin horizontal streaks of the picture flick to solid white or black for a frame or two, like a worn tape skipping a few lines, and then the image is whole again.

Static noise
Visual effects / Glitch · static-noise

The frame fills with flickering grey speckles that change every frame, like an old television picking up no signal.

Glow & light

Halation
Visual effects / Glow & light · halation

Bright lights and white shapes pick up a soft red-orange glow that bleeds past their edges into the dark around them, like highlights on real film stock.

Keying & mattes

Chroma key
Visual effects / Keying & mattes · chroma-key

Everything in a shot that matches one solid backdrop colour is cut away, leaving the subject free to be placed on top of a different background.

Luma key
Visual effects / Keying & mattes · luma-key

Every part of a layer lighter (or darker) than a chosen brightness turns see-through, so the layer underneath shows through only those tones.

Lens effects

Diffraction spikes
Visual effects / Lens effects · diffraction-spikes

A bright point of light shoots thin straight rays out from its centre at even angles, turning it into a sharp star shape that grows and shrinks with its brightness.

Lens dirt overlay
Visual effects / Lens effects · lens-dirt-overlay

Specks and smudges stuck to the camera lens stay hidden until a bright light comes near, then glow up as soft blurry patches that fade again as the light moves away.

Motion & shutter

Accumulation motion blur
Visual effects / Motion & shutter · accumulation-motion-blur

Each frame blends many renders of the scene taken a sliver of time apart, so moving things smear into soft trails along the exact path they travelled.

Painterly & sketch

Linocut
Visual effects / Painterly & sketch · linocut

The picture is turned into a stark black-and-paper print whose shapes look gouged out by hand, with rough carved strokes standing in for the in-between tones.

Oil paint filter
Visual effects / Painterly & sketch · oil-paint-filter

A picture is redrawn as soft, flat dabs of colour with sharp borders between them, as though painted with a thick brush, and the dabs grow larger as the effect strengthens.

Pencil sketch
Visual effects / Painterly & sketch · pencil-sketch

A picture is turned into a grey pencil drawing on paper, its shadows built from fine hatched strokes and its edges traced in soft lines.

Watercolor bleed
Visual effects / Painterly & sketch · watercolor-bleed

Crisp areas of colour turn wet and run into each other, their borders softening into ragged, blotchy fringes with darker pigment gathering where they meet.

Particle & weather overlays

Fire overlay
Visual effects / Particle & weather overlays · fire-overlay

A strip of licking flames burns along one edge of the shot, layered on top of the picture, with their flickering orange light washing over everything nearby.

Smoke overlay
Visual effects / Particle & weather overlays · smoke-overlay

A translucent layer of soft, wispy smoke slides across the whole picture, thickening and thinning so the shot behind it is half hidden and half seen.

Pixel & mosaic

ASCII art render
Visual effects / Pixel & mosaic · ascii-art-render

An image is rebuilt from rows of typed characters, with heavy symbols standing in for its bright areas and light dots or blanks for its dark ones.

Mosaic tiling
Visual effects / Pixel & mosaic · mosaic-tiling

A picture is rebuilt out of small, slightly uneven square tiles, each a single colour taken from the patch beneath it, set in dark grout like stone or glass.

Nearest-neighbor upscale
Visual effects / Pixel & mosaic · nearest-neighbor-upscale

A tiny image is blown up large by copying each of its pixels into a solid square, so it stays sharp and blocky instead of going soft.

Pixelation
Visual effects / Pixel & mosaic · pixelation

The frame is chopped into big square tiles and each tile shows just the average colour underneath it, so the picture turns into a coarse, blocky version of itself.

Recursion & feedback

Frame delay echo
Visual effects / Recursion & feedback · frame-delay-echo

Fainter copies of the picture from a few frames back are stacked under the live one, so a moving subject drags a fading replay of its recent path.

Video feedback loop
Visual effects / Recursion & feedback · video-feedback-loop

The picture holds a smaller, slightly rotated copy of itself, again and again, so the frame spirals into an endless tunnel where every moving thing leaves a delayed, colour-shifting trail.

Retro digital

Copper bars
Visual effects / Retro digital · copper-bars

Shiny horizontal stripes, each shaded like a lit tube, stretch across the whole screen and swing up and down on rippling sine paths, crossing over and under one another.

Matrix digital rain
Visual effects / Retro digital · matrix-digital-rain

Vertical streams of green computer characters slide down a dark screen at different speeds, each led by a glowing white glyph and trailing a tail that dims to nothing.

Synthwave sun
Visual effects / Retro digital · synthwave-sun

A huge yellow-to-pink sun half sunk behind the horizon, its lower part cut into horizontal bars that thicken and slide downward, glowing over a neon 80s sky.

Y2K chrome
Visual effects / Retro digital · y2k-chrome

Type and shapes become glossy, cool-blue liquid metal, with a pale sky and a dark rippling horizon reflected in the face, a lit bevel, a dark extruded edge and winking star sparkles.

Rotoscope & outline

Rotoscope look
Visual effects / Rotoscope & outline · rotoscope-look

Moving pictures are flattened into a few solid colour areas with a dark hand-traced line around each one, so real footage looks like it was drawn over frame by frame.

Symmetry & geometry

Infinite zoom
Visual effects / Symmetry & geometry · infinite-zoom-tunnel

The picture contains a smaller framed copy of itself, which contains another, and the camera pushes in without end as each inner copy swells to fill the screen.

Pattern tiling
Visual effects / Symmetry & geometry · pattern-tiling

A single small design is copied over and over in a grid, each copy shifted, flipped or turned, until the frame is covered by one continuous repeating pattern.

Polar coordinate warp
Visual effects / Symmetry & geometry · polar-coordinate-warp

A wide flat picture curls round until its two ends join, becoming a round disc with its bottom edge pinched into the middle and its top edge spread round the outside.

Thermal & sensor

CCTV surveillance look
Visual effects / Thermal & sensor · cctv-surveillance-look

The picture becomes a security camera recording: choppy grey footage with grain, a bulging wide lens and dark corners, stamped with a camera name and a running clock.

Infrared false color
Visual effects / Thermal & sensor · infrared-false-color

A colour remap that imitates infrared film, turning leaves and grass red or magenta while blue sky and water sink to near black.

Night vision
Visual effects / Thermal & sensor · night-vision

A dark picture is brightened into speckled, glowing green monochrome and shown inside a round eyepiece that fades to black at its rim.

Thermal false color
Visual effects / Thermal & sensor · thermal-false-color

Each part of the picture is recoloured by how bright it is, from black and violet in the dark areas through red and orange to yellow-white in the brightest, like a heat camera.

X-ray
Visual effects / Thermal & sensor · x-ray

The image turns into a dark-blue radiograph where the surroundings go black, flesh fades to a dim glow and the bones or dense parts inside shine pale white.

Time displacement

Frame stutter
Visual effects / Time displacement · frame-stutter

The motion keeps catching on single frames for uneven little beats and then skipping ahead, as if the playback were lagging.

Pulldown judder
Visual effects / Time displacement · pulldown-judder

A steady move hitches along in a repeating long-short rhythm because some of its frames are shown twice to fit a different frame rate.

Rolling shutter wobble
Visual effects / Time displacement · rolling-shutter-wobble

When the camera jerks sideways, upright shapes lean and wiggle like jelly, because the top of the picture is caught a split second before the bottom.

VHS & tape

Analog ghosting
Visual effects / VHS & tape · analog-ghosting

Pale, slightly shifted duplicates of the picture trail just beside every edge, like a weak TV signal bouncing off something before it reaches the set.

Camcorder timecode overlay
Visual effects / VHS & tape · camcorder-timecode-overlay

A home video camera's display sits over the shot: a blinking red REC light, a battery icon, a date and time stamp and a tape counter ticking off frames in chunky white digits.

Chroma bleed
Visual effects / VHS & tape · chroma-bleed

The colours of a shot slide and smudge sideways beyond the shapes they belong to, while the outlines and light-and-dark detail stay sharp, like an old videotape.

Interlace combing
Visual effects / VHS & tape · interlace-combing

Alternate horizontal lines of the frame lag a split second behind the others, so the edges of anything moving fast break into thin jagged teeth like the tines of a comb.

Tape wobble
Visual effects / VHS & tape · tape-wobble

The picture sways left and right in a slow wave that rolls down the screen, bending straight upright edges into soft curves like an old tape playing unevenly.

VHS tracking bar
Visual effects / VHS & tape · vhs-tracking-bar

A wide strip of white static with frayed edges creeps up the picture, tearing the image inside it sideways like an old videotape that has slipped out of alignment.

Water & atmosphere

Frost
Visual effects / Water & atmosphere · frost

Branching white ice fronds spread inward from the borders of the picture over a misty haze, gradually veiling the scene behind them.

Rain on glass
Visual effects / Water & atmosphere · rain-on-glass

The scene is seen through a misted window dotted with water drops, each a tiny lens holding a sharp upside-down view, while heavy drops run down, gulp smaller ones and leave clear streaks.

Broadcast graphics

Annotation

Arrow pointer draw
Broadcast graphics / Annotation · arrow-pointer-draw

A curved arrow draws itself across the frame toward one detail, its pointed head snapping on at the end of the stroke to show exactly where to look.

Callout line with label
Broadcast graphics / Annotation · callout-line-with-label

A caption appears beside the picture and a thin line then draws out from it to one exact spot, ending in a small dot that marks what the caption names.

Dimension line annotation
Broadcast graphics / Annotation · dimension-line-annotation

A thin measuring line with arrowheads and end ticks stretches along one side of an object, and the size it measures pops up in a gap at its middle.

Focus blur-out
Broadcast graphics / Annotation · focus-blur-out

The rest of the picture goes soft and a little darker while one chosen area stays sharp, pulling the eye onto it.

Highlight circle draw
Broadcast graphics / Annotation · highlight-circle-draw

A loose, slightly lopsided loop is sketched around a word or object in one quick pen stroke, its end running past where it began.

Numbered hotspot pins
Broadcast graphics / Annotation · numbered-hotspot-pins

Small round badges numbered in order pop onto chosen points of a picture one at a time, each throbbing with a soft ring so the viewer knows where to look next.

Spotlight dim
Broadcast graphics / Annotation · spotlight-dim

The whole frame darkens except for one area, which stays bright as if a spotlight were on it, pulling attention there.

Strike-through draw
Broadcast graphics / Annotation · strike-through-draw

A pen line is drawn across a word or number from one end to the other, crossing it out to show it no longer stands.

Underline swash draw
Broadcast graphics / Annotation · underline-swash-draw

A wavy, brush-like line with thin pointed ends sweeps in under a word from left to right, as if someone underlined it by hand.

Zoom-to-detail magnifier
Broadcast graphics / Annotation · zoom-to-detail-magnifier

A round lens slides across a picture and, inside its rim, shows the area under it enlarged so small detail becomes readable.

Bumpers & idents

Light-trail logo reveal
Broadcast graphics / Bumpers & idents · light-trail-logo-reveal

A glowing beam of light glides across a dark screen, and the logo is lit up and left behind wherever the beam has already passed.

Line-draw logo reveal
Broadcast graphics / Bumpers & idents · line-draw-logo-reveal

A logo appears as a single thin line tracing round its outlines, and once every shape has closed the mark fills in solid.

Logo bug
Broadcast graphics / Bumpers & idents · station-id-bug

A small, faint channel logo stays parked in one corner over the footage, briefly brightening and swelling on a cue before settling back.

Logo sting
Broadcast graphics / Bumpers & idents · logo-sting

A quick, punchy burst of motion such as a whip of colour bars and a white flash that slams a logo into place and leaves it holding on screen.

Morphing shape ident
Broadcast graphics / Bumpers & idents · morphing-shape-ident

A single solid shape keeps changing into one form after another, pausing briefly on each, until it settles as the brand mark and the name appears beside it.

Charts

Area fill sweep
Broadcast graphics / Charts · area-fill-sweep

An area chart builds from left to right, its line and the shading beneath it appearing together behind a moving vertical edge.

Axis rescale
Broadcast graphics / Charts · axis-rescale

A chart's value axis glides to a new range, its gridlines and labels sliding into place while the bars or lines already drawn shrink or stretch to stay true to it.

Bar chart race
Broadcast graphics / Charts · bar-chart-race

Horizontal bars for several items grow with their changing values over time and slide past one another, so the chart stays sorted with the biggest always on top.

Bar grow
Broadcast graphics / Charts · bar-grow

The bars of a chart shoot up from a common baseline to their values, each starting a beat after the one to its left.

Box plot draw
Broadcast graphics / Charts · box-plot-draw

A box-and-whisker chart assembles on screen: each median line appears, the box opens out to the quartiles, and the whiskers stretch to the extremes before outliers pop in.

Bullet graph fill
Broadcast graphics / Charts · bullet-graph-fill

A slim bar grows across stepped shaded bands toward its value, while a vertical tick shows the goal it is measured against.

Candlestick build
Broadcast graphics / Charts · candlestick-build

A stock-style price chart fills in left to right, each candle growing its body from open to close and then stretching its thin wick out to the high and low.

Chart type morph
Broadcast graphics / Charts · chart-type-morph

Each mark of a chart reshapes in place into the matching mark of a different chart type, so bars bend into pie slices while the data stays traceable.

Chord diagram draw
Broadcast graphics / Charts · chord-diagram-draw

Coloured arcs sweep on around a ring, then curved bands grow through the middle linking pairs of arcs, each band as thick as the amount flowing between them.

Force-directed network settle
Broadcast graphics / Charts · force-directed-network-settle

A network of dots and connecting lines starts bunched up and tangled, then drifts apart and untangles as the dots push each other away and the lines tug linked dots together, easing to rest in a tidy layout.

Funnel stage reveal
Broadcast graphics / Charts · funnel-stage-reveal

A funnel chart builds band by band from the top, each band narrower than the one above, with its count inside and the percentage lost since the previous step beside it.

Gantt bar build
Broadcast graphics / Charts · gantt-bar-build

A project schedule draws itself one row at a time, each task bar stretching sideways across a time scale from the day it begins to the day it ends.

Gauge needle sweep
Broadcast graphics / Charts · gauge-needle-sweep

A pointer swings round a marked dial to land on a value, carrying a little past it before it settles back.

Heatmap fill
Broadcast graphics / Charts · heatmap-fill

The squares of a data grid start out blank grey and one after another warm into the colour their number calls for, so the pattern spreads across the matrix in a wave.

Hexbin density build
Broadcast graphics / Charts · hexbin-density-build

Dots pour onto a chart and are tallied into a honeycomb of hexagon cells that glow hotter the more dots fall into them, until the dense areas stand out.

Line chart draw-on
Broadcast graphics / Charts · line-chart-draw-on

A data line sweeps across a chart from left to right, plotting each value in turn so the trend unfolds as you watch.

Parallel coordinates draw
Broadcast graphics / Charts · parallel-coordinates-draw

Several upright value axes stand side by side and each data record strokes on as a line zig-zagging across them, one record after another.

Pictogram counting
Broadcast graphics / Charts · pictogram-counting

Each quantity is shown as a row of identical small icons, one per unit, that drop in one after another while a number beside the row ticks up with them.

Pie sweep
Broadcast graphics / Charts · pie-sweep

A pie or donut chart that fills in with a single clockwise sweep from the top, revealing each slice in turn as the edge passes over it.

Polar area rose
Broadcast graphics / Charts · polar-area-rose

A circle split into equal slices that each swell outward from the middle by a different amount, so the size of every slice shows how big its number is.

Radar chart fill
Broadcast graphics / Charts · radar-chart-fill

A shaded polygon swells out from the middle of a web of spokes until each corner stops at its score on its own axis, sketching a profile of several measures at once.

Ridgeline ripple
Broadcast graphics / Charts · ridgeline-ripple

A chart of distribution curves stacked in rows, each peak overlapping the row above, that swell up from flat lines one row after another so the reveal rolls down the stack.

Sankey flow
Broadcast graphics / Charts · sankey-flow

A chart whose curved bands stream from one column of categories into the next, each band as thick as the amount it carries, so you see where everything ends up.

Scatter plot point appear
Broadcast graphics / Charts · scatter-plot-point-appear

On an empty pair of axes, the dots of a scatter plot pop into view one after another until the full cloud of data is showing.

Scatter time playback
Broadcast graphics / Charts · scatter-time-playback

Bubbles on a scatter chart drift to new spots and grow or shrink as the years tick by, each leaving a fading tail of the path it took.

Series isolate highlight
Broadcast graphics / Charts · series-isolate-highlight

In a chart with several lines, the other lines drain to a faint grey so that one chosen line is left standing out in bold colour.

Slopegraph reveal
Broadcast graphics / Charts · slopegraph-reveal

Items listed down two facing columns, one per point in time, are joined by straight lines that draw across one by one, so each rise or drop shows as a slope.

Small multiples cascade
Broadcast graphics / Charts · small-multiples-cascade

A grid of matching little charts, one per category and all on the same scale, fills in panel by panel, each chart building its data as its panel lands.

Sorted bar reorder
Broadcast graphics / Charts · sorted-bar-reorder

Horizontal bars grow as their numbers climb, and the chart keeps itself ranked by sliding any bar that overtakes another up past it into its new place.

Sparkline draw
Broadcast graphics / Charts · sparkline-draw

A small line chart with no axes traces itself from left to right next to a key figure, showing at a glance which way the number has been heading.

Stacked bar build
Broadcast graphics / Charts · stacked-bar-build

A chart column builds up from its baseline in coloured pieces, each new piece rising on top of the last until the bar reaches its full total.

Streamgraph flow
Broadcast graphics / Charts · streamgraph-flow

Several data series stacked as smooth coloured ribbons around a wavy centre line, swelling and thinning over time so the whole chart looks like a flowing river.

Sunburst build
Broadcast graphics / Charts · sunburst-build

A layered ring chart grows outward from its centre, each ring of arc segments sweeping round in turn so the sub-categories fan out beneath the category that holds them.

Timeline scroll
Broadcast graphics / Charts · timeline-scroll

A dated line slides sideways beneath a fixed marker, pausing on each milestone so its date and label light up before the line travels on to the next one.

Treemap re-layout
Broadcast graphics / Charts · treemap-re-layout

A treemap takes on new numbers and every tile resizes and slides at the same time, so the panel repacks into the new proportions without ever breaking apart.

Waffle chart fill
Broadcast graphics / Charts · waffle-chart-fill

A ten-by-ten grid of small squares colours in one square at a time, each worth an equal slice, until the lit squares add up to the figure being shown.

Waterfall build
Broadcast graphics / Charts · waterfall-build

A chart whose bars appear one after another, each gain or loss hanging off the level the previous bar left, so a starting figure visibly steps up and down to a final total.

Comparisons

Balance bar tug
Broadcast graphics / Comparisons · balance-bar-tug

A single bar shared by two colours, one per side, whose dividing line gets yanked back and forth and settles as the balance between the two sides shifts.

Difference highlight
Broadcast graphics / Comparisons · difference-highlight

Two versions of a picture sit together and each spot that changed between them gets a tinted box, one after another, on both versions at once.

Split-screen comparison
Broadcast graphics / Comparisons · split-screen-comparison

Two halves of the picture slide in from either side and meet in the middle, putting two things next to each other so they can be compared.

Versus card
Broadcast graphics / Comparisons · versus-card

Two rivals slide in on panels facing each other across a VS badge, then matching stat bars and numbers fill in on both sides for a side-by-side comparison.

End cards

End card with subscribe slot
Broadcast graphics / End cards · end-card-with-subscribe-slot

The last screen of a video settles into a tidy grid of panels, one for the next video to watch, one with a subscribe button and one for a link, each fading in after the last.

Rolling end credits
Broadcast graphics / End cards · rolling-end-credits

A tall list of roles and names glides steadily up the screen from bottom to top, the way the closing credits of a film run.

Explainers

Isometric assembly
Broadcast graphics / Explainers · isometric-assembly

The pieces of an object drawn at a flat isometric angle drift in from around it, one after another, and snap together until the whole thing stands complete.

Whiteboard marker drawing
Broadcast graphics / Explainers · whiteboard-marker-drawing

A hand holding a marker draws a diagram on a white board line by line, the ink appearing right behind the pen tip.

Lower thirds

Angled lower third
Broadcast graphics / Lower thirds · angled-lower-third

A name caption near the bottom of the frame made of bars with slanted ends, which sweep open one after another, hold for a read, then sweep away.

Lower third slide-in bar
Broadcast graphics / Lower thirds · lower-third-slide-in-bar

A solid strip with a name and a short title on it glides in from the left near the bottom of the picture, stays a moment, then glides back off.

Two-tier kicker and title stack
Broadcast graphics / Lower thirds · two-tier-kicker-and-title-stack

A short line of small capitals shows up first as a label, and a much larger title then rises into place directly underneath it.

Maps

Choropleth fill
Broadcast graphics / Maps · choropleth-fill

Blank regions on a map fill in one after another, each taking a shade from a colour scale that stands for its number, until the whole map reads as data.

Dot density map
Broadcast graphics / Maps · dot-density-map

A map where each small dot stands for a fixed number of things and is dropped at random inside its region, so crowded areas fill up thickly while empty ones stay sparse.

Flight arc
Broadcast graphics / Maps · flight-arc

A bowed line climbs out of one point on a map and draws itself over to another, tracing a flight path or long-distance link between the two places.

Flow map lines
Broadcast graphics / Maps · flow-map-lines

Curved lines grow across a map from a starting place to several others, each one drawn thicker or thinner according to how much travels along it.

Globe spin
Broadcast graphics / Maps · globe-spin

A shaded ball printed with a world map turns at a steady pace about its north-south axis, so continents keep rolling into view on one side and away on the other.

Isochrone expansion
Broadcast graphics / Maps · isochrone-expansion

A lopsided outline swells across a map from a starting pin as a minutes counter rises, swallowing nearby places and leaving shaded bands behind at each round travel time.

Location ripple pulse
Broadcast graphics / Maps · location-ripple-pulse

A dot marking a place on a map beats in a steady rhythm, sending out a ring with each beat that spreads across the map and fades away.

Projection morph
Broadcast graphics / Maps · projection-morph

A globe flattens out into a rectangular world map, its continents and grid lines gliding continuously from their places on the sphere to their places on the flat projection.

Zoom-to-location map
Broadcast graphics / Maps · zoom-to-location-map

A map seen from far away glides and magnifies in one smooth move until a single place fills the frame, where a marker then lands on it.

Process diagrams

Cycle diagram rotation
Broadcast graphics / Process diagrams · cycle-diagram-rotation

Labelled steps appear one after another around a ring, joined by curved arrows that draw themselves, then a marker circles the finished loop and lights each step it reaches.

Decision tree branch growth
Broadcast graphics / Process diagrams · decision-tree-branch-growth

A flowchart-style tree builds downward from its top question, each connecting line drawing out to the next level and the answer box popping in where it ends.

Flowchart build
Broadcast graphics / Process diagrams · flowchart-build

A process diagram assembles step by step, each box popping in and an arrow then drawing from it to the next, with decisions splitting into branches.

Hub-and-spoke spread
Broadcast graphics / Process diagrams · hub-and-spoke-spread

A central circle appears and a ring of smaller circles shoots out of it in turn, each trailing a line back to the middle, until they sit evenly around it.

Milestone marker pop
Broadcast graphics / Process diagrams · milestone-marker-pop

Dots spring up one at a time along a timeline axis, each lifting a little stem that shows a date and a short name for that step.

Org chart grow
Broadcast graphics / Process diagrams · org-chart-grow

A chart of labelled boxes builds from the top down, connector lines branching out from each level before the boxes of the next level appear beneath them.

Pyramid build
Broadcast graphics / Process diagrams · pyramid-build

A triangle split into labelled horizontal layers assembles from the wide base upward, each layer dropping onto the one below until the point on top completes it.

Quadrant matrix reveal
Broadcast graphics / Process diagrams · quadrant-matrix-reveal

Two labelled axes draw on and split the frame into four quadrants, then labelled cards drop into the quadrants one at a time.

Step-by-step process reveal
Broadcast graphics / Process diagrams · step-by-step-process-reveal

Numbered stages of a process appear one after another down the screen, each with a heading and a short note, and the newest stage is highlighted while earlier ones quieten.

Social media

Chat bubble sequence
Broadcast graphics / Social media · chat-bubble-sequence

A back-and-forth conversation builds up line by line, each message bubble springing into view from its speaker's side of the screen a beat after the previous one.

Comment pop-up stack
Broadcast graphics / Social media · comment-pop-up-stack

Viewer comments, each a little card with an avatar, a name and a line of text, fade and float up into place one below another until they fill a column.

Floating reaction emoji
Broadcast graphics / Social media · floating-reaction-emoji

A steady stream of small faces and hearts pops out of one spot, weaves upward along loose wandering paths and fades away as it climbs.

Poll result bar fill
Broadcast graphics / Social media · poll-result-bar-fill

Each answer in a poll gets a bar that fills to its share of the votes while its percentage counts up, and the most popular answer is highlighted when they settle.

Quote card reveal
Broadcast graphics / Social media · quote-card-reveal

A card eases in, a large opening quote mark draws itself on, then the quoted words rise into place and the speaker's name follows underneath.

Subscribe button press
Broadcast graphics / Social media · subscribe-button-press

A pointer clicks a bright red subscribe button, which squashes and springs back as a dark subscribed button with a small bell that pops in and rings.

Sports graphics

Game clock countdown
Broadcast graphics / Sports graphics · game-clock-countdown

A scoreboard clock ticks a period down to zero, flags the end of the period, then resets to full time as the period badge steps to the next one.

Leaderboard row swap
Broadcast graphics / Sports graphics · leaderboard-row-swap

When a score changes in a ranked table, the affected rows glide up or down past each other into their new order while the place numbers stay fixed.

Player movement trail
Broadcast graphics / Sports graphics · player-movement-trail

A tracked player is followed by a line marking only their last moments of movement, bright at their position and thinning away to nothing behind them.

Player stat card
Broadcast graphics / Sports graphics · player-stat-card

A card with a player's name and shirt number builds on screen, then their key numbers drop in underneath one row at a time, each figure ticking up as it arrives.

Score bug
Broadcast graphics / Sports graphics · score-bug

A small scoreboard tucked into a corner of the picture keeps the teams, score, period and clock on screen, sliding in at the start and flashing when a score changes.

Team color wipe
Broadcast graphics / Sports graphics · team-color-wipe

A wide slanted band in a team's colours, edged with a contrasting stripe, races across the screen and leaves that team's player or line-up card behind it.

Virtual first-down line
Broadcast graphics / Sports graphics · virtual-first-down-line

A bright line drawn across a sports field in true perspective that holds its yard line as the camera moves, with players standing in front of it as if it were painted on the grass.

Stats

Delta arrow badge
Broadcast graphics / Stats · delta-arrow-badge

A little coloured tag with an up or down arrow and the signed difference pops in next to a number, showing at once how far it rose or fell since last time.

Percentage fill bar
Broadcast graphics / Stats · percentage-fill-bar

A flat bar grows from the left across its track to a set share, with the percentage figure travelling at the tip and counting up as it fills.

Podium rise
Broadcast graphics / Stats · podium-rise

Ranked blocks grow up from a shared floor one after another, starting with the lowest place, so the tallest first-place block lands last.

Tickers & banners

Breaking news banner slam
Broadcast graphics / Tickers & banners · breaking-news-banner-slam

A bold red-and-white news bar shoots in from the side, overshoots, snaps back into place with a jolt, and then sits fixed across the lower part of the picture.

Headline rotator
Broadcast graphics / Tickers & banners · headline-rotator

A banner keeps one headline slot and swaps its text in turn, each headline sliding out of the slot while the next slides in behind it.

News ticker crawl
Broadcast graphics / Tickers & banners · news-ticker-crawl

A strip across the foot of the frame carries a line of headlines that slides steadily from right to left past a fixed tag, story after story with bullets between.

Timers & indicators

Live indicator pulse
Broadcast graphics / Timers & indicators · live-indicator-pulse

A little red dot next to a LIVE tag beats on and off at an even tempo, a faint ring rippling out from it, to signal that the broadcast is happening now.

Stopwatch count-up
Broadcast graphics / Timers & indicators · stopwatch-count-up

A time readout starts at zero and climbs steadily in minutes, seconds and hundredths, showing how long has passed since the clock was started.

Timecode counter
Broadcast graphics / Timers & indicators · timecode-counter

An hours, minutes, seconds and frames readout in fixed-width digits that steps forward one frame at a time, the frame digits racing and rolling over into the seconds.

Title sequences

Broadcast title card stinger
Broadcast graphics / Title sequences · broadcast-title-card-stinger

A bold panel sweeps across the whole screen to present the show title, then shrinks with it into a small tag that stays in the corner.

Tile grid title reveal
Broadcast graphics / Title sequences · tile-grid-title-reveal

A title card arrives piece by piece as a grid of tiles, each flipping, growing or fading into place at its own moment until the whole card is assembled.

UI walkthroughs

Click ripple indicator
Broadcast graphics / UI walkthroughs · click-ripple-indicator

Each time the pointer clicks in a screen recording, a ring bursts out from the click point and fades, marking where the input landed.

Cursor path animation
Broadcast graphics / UI walkthroughs · cursor-path-animation

A mouse pointer sweeps along smooth curves from one on-screen control to the next, stopping on each to click before moving on.

Cursor-follow auto zoom
Broadcast graphics / UI walkthroughs · cursor-follow-auto-zoom

A screen capture pushes in close around the mouse pointer as it clicks, drifts along after it while it moves, then eases back out to show the whole screen.

Device mockup slide-in
Broadcast graphics / UI walkthroughs · device-mockup-slide-in

A drawn laptop or phone with the product on its screen glides in from off frame, straightening from a slight tilt as it settles into place.

Keystroke overlay
Broadcast graphics / UI walkthroughs · keystroke-overlay

Keyboard shortcuts pressed during a screen recording appear as little keycaps on a dark pill near the bottom of the frame, each one tapping down before the combo fades away.

UI walkthrough camera zoom
Broadcast graphics / UI walkthroughs · ui-walkthrough-camera-zoom

Starting on a whole app screen, the camera glides in and across until one part of the interface fills the frame.

Sound

Mixing & editing

Ambience
Sound / Mixing & editing · ambience

A soft, steady layer of the sound a location would have, like wind, traffic or a murmuring room, running underneath a scene so it feels like a real place.

Ducking
Sound / Mixing & editing · ducking

The background music drops to a lower level whenever a voice or other foreground sound plays, then swells back up as soon as it stops.

Sound bridge
Sound / Mixing & editing · sound-bridge

The same sound or phrase of music keeps playing straight through a cut, so the picture changes while the audio carries the viewer smoothly into the next shot.

Stereo panning
Sound / Mixing & editing · stereo-panning

A sound drifts from one speaker to the other in step with the thing on screen making it, so you hear it travel left or right as you watch it go.

Voiceover
Sound / Mixing & editing · voiceover

A speaker who is never seen talks over the footage, telling the story while the picture plays and the music sinks underneath the words.

Music

Button ending
Sound / Music · button-ending

The music finishes on one short, punchy final hit exactly on a beat and then cuts to silence instead of fading away.

Cut to the beat
Sound / Music · cut-to-the-beat

Each change of shot, and each big move, is placed on a beat of the music so the edit pulses in time with the track.

Music bed
Sound / Music · music-bed

A soft, continuous piece of music plays beneath the entire film, setting its mood while the effects and any voice stay clearly louder on top.

Musical sting
Sound / Music · stinger

A tiny burst of music, often a couple of quick notes landing on one chord, timed to hit exactly as something is revealed or a joke lands.

Silence drop
Sound / Music · silence-drop

The soundtrack cuts out completely for a brief moment so that the sound which follows, often a hit on a reveal, lands with extra force.

Swell
Sound / Music · music-swell

The music climbs from soft and sparse to loud and full, more notes stacking up as it rises into a single peak.

Sound effects

Foley
Sound / Sound effects · foley

Everyday sounds of the action on screen, such as footsteps or a cup touching a table, are added afterwards and lined up with the exact frames where things make contact.

Glitch sound
Sound / Sound effects · glitch-sound

A quick burst of crackling, stuttering digital noise that plays while the picture tears and jitters, then cuts out the moment the image snaps back.

Impact hit
Sound / Sound effects · impact-hit

A short, heavy thump of sound lands on the exact frame something strikes or slams down, giving the moment of contact physical weight.

Mickey-mousing
Sound / Sound effects · mickey-mousing

Music that mimics the motion on screen, landing a note on every step, hop or tumble so each movement has its own musical beat.

Reverse cymbal
Sound / Sound effects · reverse-cymbal

A cymbal crash run backwards, so a bright hiss grows out of silence and cuts off abruptly right on the beat, cut or hit it is leading into.

Riser
Sound / Sound effects · riser

A sound that keeps getting higher and louder for a couple of seconds and cuts off at its top on the exact frame something big appears.

Sub drop
Sound / Sound effects · sub-drop

A deep bass boom that slides down in pitch and dies away under a big moment, giving it a weight you feel in your chest.

Success chime
Sound / Sound effects · success-chime

A quick, bright pair of rising tones that plays on the moment an action completes, telling the viewer it worked.

Typing sounds
Sound / Sound effects · typing-sounds

Text typing itself on screen with a keyboard click landing on each letter as it appears, so the words sound typed as well as look it.

UI sounds
Sound / Sound effects · ui-sound-effects

Small, quiet sounds placed on interface actions, such as a tick on hover, a click on a press, a snap on a toggle and a ding on a notification, each landing on the frame of its action.

Whoosh
Sound / Sound effects · whoosh

A short rush of air on the soundtrack, loudest at the instant something on screen moves fastest, so a quick move feels like it cut through the air.