What the Frontend? Open the interactive gallery →

What's that effect called?

You've seen it on a site. You can describe it, but you can't name it — so you can't search for it. This page is the reverse lookup: find the description, get the name, then learn how to build it.

Text & Typography

Headline text appears letter by letter, word by word, or line by line on page load or scroll?

That's a Staggered text reveal — Each word or character animates into view in sequence, with a slight delay — as if being unveiled.

Letters flicker through random characters before settling — like a hacker terminal or corrupted signal resolving?

That's a Scramble text / glitch type — Characters rapidly cycle through random symbols before resolving into the final word.

Words that feel alive — dropping in with physics, swinging, or morphing as part of the visual experience?

That's a Kinetic typography — Text that moves expressively — bouncing, stretching, or rotating with physical, emotional quality.

A horizontal strip of content drifting left or right in an endless loop?

That's a Marquee / infinite ticker — A row of text or logos that scrolls continuously in one direction, looping seamlessly forever.

Text slides up from beneath a hidden boundary — the letters emerge from the floor of the container?

That's a Text mask reveal — Text is revealed through a clipping mask — appearing as if sliding out from behind a surface.

A word that breathes — transitioning from thin to ultra-bold on hover, or pulsing gently to draw attention?

That's a Variable font animation — Animating the weight, width, or other axes of a variable font — making typography flex or morph.

A metric ticks up dramatically as it enters the viewport?

That's a Counting number — A statistic counts up from zero to its final value when scrolled into view.

A headline where the letters themselves are a gradient — shifting from one color to another?

That's a Gradient text — Text filled with a gradient instead of a solid color — often animated to shift or cycle through hues.

Letters appear one by one — like live input?

That's a Typewriter effect — Text appears character by character as if being typed in real time, with a blinking cursor.

"Build [beautiful / fast / scalable] software" — the highlighted word rotates through options on a timer?

That's a Word swap — One word in a headline cycles through a list of alternatives — fading or sliding between options.

Headlines that start as outlines and get "painted" as you scroll, or fill in on hover?

That's a Text stroke reveal — Outlined (stroked) text that fills in — transitioning from hollow letterforms to solid type.

A dramatic two-column layout where the headline straddles the divide, with different treatment on each side?

That's a Split-screen type — Large typography split across two sides of the screen — each half contrasting in color or background.

Scroll

Elements animate precisely as you scroll — not triggered once, but controlled by scroll position?

That's a Scroll-scrubbed animation — An animation whose progress is directly tied to scroll position — controlled frame-by-frame.

Background moves slower than foreground, creating a sense of layers at different distances?

That's a Parallax depth layers — Different elements move at different speeds as you scroll — creating an illusion of depth.

Scrolling down moves a carousel of content sideways — like sliding through panels?

That's a Horizontal scroll section — A section that scrolls horizontally while the user scrolls vertically.

A section locks on screen as you scroll — content animates inside it — then releases?

That's a Scroll-driven pinning — An element stays fixed on screen while the rest of the page scrolls past — usually while an animation plays.

A thin bar at the top of the page that fills from left to right as you scroll?

That's a Progress indicator — A visual indicator that shows how far through the page the user has scrolled.

As you scroll fast, elements tilt slightly?

That's a Scroll velocity skew — Elements skew in the direction of scroll movement, then snap back — making the page feel elastic.

You scroll, but instead of moving down, you stay in place while content evolves — scene changes?

That's a Sticky storytelling — A narrative told through scroll — content changes in sync with scroll while layout stays fixed.

Instead of free-scrolling, the page snaps to section boundaries — like advancing slides?

That's a Scroll snap — Scrolling snaps to defined positions — the page clicks to the next section.

Sections overlap and the new one slides in from below, clipping over the previous?

That's a Section wipe transition — One section slides over or wipes away the previous one as you scroll.

Background image drifts up slowly as you scroll down?

That's a Parallax hero image — The hero background image moves at a slower rate than the scroll — creating depth.

You scroll down, the video plays?

That's a Scroll-linked video — A video whose playback is controlled by scroll position — frame-by-frame.

New items append to the bottom of a list as you near the end — no pagination?

That's a Infinite scroll — Content loads automatically as the user reaches the bottom — the feed appears to have no end.

Numbers that wait — then animate from zero to their final value the moment they enter the viewport?

That's a Scroll-triggered counter — A counting number animation that starts when the stat scrolls into view.

Cursor & Pointer

Hover near a button and it pulls the cursor in?

That's a Magnetic cursor — The cursor is drawn toward interactive elements as it approaches — snapping as if magnetized.

A dot, circle, or shape that replaces the arrow cursor — often with a lag effect?

That's a Custom cursor — The default OS cursor is hidden and replaced with a custom element that follows the mouse.

Move the mouse and small particles trail behind it, fading out like a comet tail?

That's a Cursor trail — The cursor leaves a trail of elements — dots, sparks, or shapes that appear and fade as the mouse moves.

Hover over an image and it ripples, bends, or bulges around the cursor position?

That's a Cursor distortion — Moving the cursor warps or distorts elements nearby — usually images — as if a liquid force.

Cards or images tilt in 3D space as your cursor moves — like picking up a card and angling it?

That's a Hover tilt (3D card) — An element rotates in 3D to follow the cursor — tilting as if it's a physical object.

Hover close to a CTA and the button slides toward you?

That's a Magnetic button — A button that moves to follow the cursor as it hovers nearby — snapping back on leave.

Move the mouse and a soft circle of light follows — revealing content or illuminating a dark background?

That's a Cursor spotlight — A radial light effect that follows the cursor — illuminating content as if shining a torch.

Text or an icon lags behind the cursor inside a hover zone — like attached by a rubber band?

That's a Sticky hover — An element sticks to the cursor on hover — following it around before snapping back.

Hover over a project name and a preview image floats up, following the mouse?

That's a Follow cursor element — An element — image, label, or card — appears and follows the cursor when hovering over a trigger area.

Hover over a field of dots or particles and they flee from the cursor, settling back when you move away?

That's a Repel on hover — Elements scatter or move away from the cursor as it approaches — the opposite of magnetic.

3D & WebGL

An object that appears to exist in three dimensions — casting shadows, reflecting light, drifting in space?

That's a Floating 3D object — A 3D mesh that floats in the hero — rotating slowly, reacting to cursor movement.

Images that melt, wave, or warp in organic ways — like heat shimmer, water, or interference patterns?

That's a Shader distortion — A GLSL shader applied to an image or mesh that warps, ripples, or distorts it.

A cloud or field of tiny particles that move, form shapes, or respond to cursor movement?

That's a Particle system — Thousands of small points in space — forming shapes, flowing in fields, or reacting to interaction.

Letters that have physical depth — you can see their sides, they cast shadows, they exist in a space?

That's a 3D text — Typography rendered in three dimensions — with depth, extrusion, lighting, and perspective.

Hover over an image and it warps in a physically convincing way — like pressing on a membrane?

That's a WebGL image hover — A hover effect on an image that uses a WebGL shader — stretching, rippling, or burning around the cursor.

An animated surface that breathes — hills rising and falling, a plane that ripples like water?

That's a Noise terrain — A 3D mesh whose vertices are displaced by noise — creating an organic, undulating surface.

The cursor drags color through a liquid medium — trails, swirls, and turbulence that dissipate naturally?

That's a Fluid simulation — A real-time simulation of fluid dynamics — colors mixing, liquid flowing, reacting to interaction.

Scroll down and fly through a 3D environment — the camera moves along a path, objects zoom past?

That's a 3D scroll scene — A Three.js scene whose camera animates through a path driven by scroll position.

Surfaces that shimmer through spectrums of color — like a holographic sticker shifting in the light?

That's a Holographic material — A material shader that mimics iridescent, holographic foil — shifting through rainbow colors.

A flat illustration or photo that appears to have layers — hover and the foreground shifts more?

That's a Depth map parallax — A 2D image given the illusion of depth by using a separate depth map — near elements move more.

Images or text that momentarily break apart into offset color channels, scan lines, or digital noise?

That's a Glitch shader — A visual corruption effect — horizontal tears, color channel separation, digital artifacts.

A metallic or glass object that reflects the world around it — other objects, gradients appear in its surface?

That's a Environment mapped mesh — A 3D object that reflects its environment — reacting to surrounding colors and light sources.

Page & Layout

Instead of an instant page swap, a curtain falls or a shape expands to cover the screen?

That's a Page transition — An animated transition between two pages — covering, wiping, fading, or morphing from route to route.

Scroll and the page glides — momentum carries it slightly past your input, then settles?

That's a Smooth scroll — Native scroll is intercepted and replaced with buttery, inertia-based scrolling that feels expensive.

Cards or images that materialize in sequence — fading, rising, or popping into the grid in a wave?

That's a Grid reveal — Grid items animate into view staggered — appearing one after another as the grid comes into view.

A list of features or benefits that appear in a flowing sequence rather than all at once?

That's a Staggered card entrance — Cards or list items animate into view with a cascade delay.

A card that expands into a modal?

That's a FLIP transition — Elements animate smoothly between different positions and sizes on the page — using the FLIP technique.

Content hidden by a shape that grows — a circle expanding from the center, or a rectangle wiping left to right?

That's a Clip-path reveal — An element is revealed by animating a clip-path — content appears through an expanding shape.

A dialog that feels physically present — arriving from below, scaling from the trigger element?

That's a Modal entrance — The animation a modal uses to enter the screen — scaling in, fading up, sliding from an edge.

A menu, filter panel, or detail view that slides in from the right or left?

That's a Drawer / panel slide — A side panel that slides in from the edge of the screen — overlaying content rather than replacing it.

Resize the window or trigger an interaction and elements spring to their new positions?

That's a Elastic layout — Layout elements that respond to resize or interaction with a spring-based elasticity.

Unequal-height cards fill a grid layout and each animates into its final position on load?

That's a Masonry animation — A masonry grid where items animate into their calculated positions.

Hover & Micro-interactions

Press a button and it squashes down, then springs back with a slight overshoot?

That's a Elastic button — A button that squishes and stretches on click — deforming with a spring physics response.

A project name in a list reveals a thumbnail on hover?

That's a Hover image preview — Hover over a text link and a preview image appears — following the cursor or in a fixed position.

Hover a link and a line draws from left to right beneath it?

That's a Link underline draw — A hover underline that draws itself from one end to the other rather than appearing instantly.

A "Submit" button that transforms into a loading spinner, then a checkmark?

That's a Button morph — A button that changes shape, content, or form on interaction — morphing between states.

Hover an image and it bulges, ripples, or melts at the cursor point?

That's a Image distortion on hover — Images warp, bend, or ripple when hovered — using WebGL or CSS filters.

Instead of instantly appearing, tooltips pop up with a spring physics motion?

That's a Tooltip animation — Tooltips that animate in with character — spring into position or scale from the anchor point.

Flip a toggle and the handle springs across, the color transitions — the state change is satisfying?

That's a Toggle switch — A toggle that animates its state change — the knob slides, the background transitions.

Hover a card and a border traces itself around the edges?

That's a Border draw — A border that draws itself around an element on hover — animating the stroke from a starting point.

A send arrow that flies off?

That's a Icon animation — Icons that animate on hover — morphing, rotating, bouncing, or switching state.

Hover a section or card and the color changes — sliding through values?

That's a Color shift on hover — Background or text color transitions smoothly on hover — often across bold color combinations.

Click anywhere and a soft circle radiates out from your cursor, fading before it reaches the edge?

That's a Ripple effect — A click spawns a circular ripple that expands and fades from the click point.

A nav link that fills with white from left to right as you hover?

That's a Text fill on hover — Hovering over text gradually fills it with a new color — as if being painted from one direction.

Loading & State

Grey boxes in the shape of text, images, and cards appear while real content loads?

That's a Skeleton loader — Placeholder shapes that mimic the layout of loading content — showing structure before data arrives.

A horizontal indicator of how far through something you are — filling as steps complete?

That's a Progress bar — A bar that fills from left to right indicating completion progress.

A circle or arc that rotates continuously while waiting for a response?

That's a Spinner — A rotating indicator signaling that something is loading or processing.

Before the site appears, a full-screen intro plays — a logo animation, a counter — then resolves?

That's a Page preloader — An intro screen that plays while the page assets load — often branded before content reveals.

Click "like" and the count goes up instantly?

That's a Optimistic UI — The interface updates immediately on user action — assuming success — before the server response.

The skeleton grey boxes have a soft light that travels across them from left to right?

That's a Skeleton shimmer — A skeleton loader with an animated light sweep — a shimmer that passes across placeholder shapes.

Submit a form and a checkmark draws itself with a spring animation?

That's a Success state animation — An animation that confirms a successful action — a checkmark drawing itself, a celebration moment.

Submit with wrong input and the field shakes side to side — a universal signal for "no, wrong."?

That's a Error shake — A form field or element shakes horizontally when validation fails — communicating error through motion.

Background & Atmosphere

Soft blobs of color that bleed into each other across the background?

That's a Gradient mesh — Multiple overlapping radial gradients that blend into an organic, painterly background.

The slight texture on premium design sites — as if the screen has a subtle paper grain?

That's a Noise texture — A fine grain or noise texture overlaid on backgrounds — adding depth and analog feel.

A gradient that slowly breathes — hues shifting, colors cycling?

That's a Animated gradient — A background gradient that shifts, rotates, or transitions between color states over time.

Tiny points floating gently across the background — sometimes reacting to cursor movement?

That's a Particle background — A field of floating particles in the background — dots or points that drift slowly.

The faint grid lines or dot grid visible behind hero sections — like graph paper but elegant?

That's a Grid / dot pattern — A subtle repeating grid, dot matrix, or line pattern as a background texture.

Hazy, glowing color shapes that drift slowly in the background — ethereal, cosmic, ambient?

That's a Aurora effect — Softly animated, luminous blobs of color that shift like the northern lights.

Smooth, rounded shapes that continuously change their contours — like liquid forms evolving?

That's a SVG blob morph — Organic blob shapes that morph between forms — their edges shifting and flowing continuously.

The subtle darkening at screen edges — like a camera lens effect that focuses attention inward?

That's a Vignette — A darkened edge around the viewport — drawing the eye to the center and adding cinematic depth.

Fine horizontal stripes across the background or image — adding texture and retro character?

That's a Scanline overlay — Horizontal lines overlaid on content — evoking CRT monitors or retro aesthetics.

Video & Media

The hero has a video behind it — footage or animation playing silently and continuously?

That's a Background video loop — A muted video playing on loop behind content — adding motion and atmosphere to a hero section.

Scrolling down advances the video frame by frame — you control the playback with your scroll?

That's a Video scrub on scroll — Video playback is controlled by scroll position frame by frame.

Scroll through a product rotation rendered as individual PNGs — faster to load than video?

That's a Image sequence scroll — A series of pre-rendered frames swapped in sequence as the user scrolls.

Smooth, detailed animations — illustrations that move, icons that transform — without video overhead?

That's a Lottie animation — A vector animation exported from After Effects and played in the browser — lightweight and scalable.

Visuals that are generated live rather than loaded — flowing lines, particle simulations?

That's a Canvas drawing — Real-time drawing or generative visuals rendered on an HTML canvas — procedural, infinite variation.

Lines, icons, or illustrations that appear to be drawn in real time — the stroke traces its path?

That's a SVG path draw — An SVG path that draws itself — animating the stroke-dashoffset to reveal the line progressively.