The Frontend Effects Dictionary
92 web animation and interaction effects — named, defined, rated for difficulty, matched to the libraries that build them, and each with a copy-paste AI prompt. Don't know the name? Try the reverse lookup.
Text & Typography — 12
Staggered text revealEach word or character animates into view in sequence, with a slight delay — as if being unveiled.→Scramble text / glitch typeCharacters rapidly cycle through random symbols before resolving into the final word.→Kinetic typographyText that moves expressively — bouncing, stretching, or rotating with physical, emotional quality.→Marquee / infinite tickerA row of text or logos that scrolls continuously in one direction, looping seamlessly forever.→Text mask revealText is revealed through a clipping mask — appearing as if sliding out from behind a surface.→Variable font animationAnimating the weight, width, or other axes of a variable font — making typography flex or morph.→Counting numberA statistic counts up from zero to its final value when scrolled into view.→Gradient textText filled with a gradient instead of a solid color — often animated to shift or cycle through hues.→Typewriter effectText appears character by character as if being typed in real time, with a blinking cursor.→Word swapOne word in a headline cycles through a list of alternatives — fading or sliding between options.→Text stroke revealOutlined (stroked) text that fills in — transitioning from hollow letterforms to solid type.→Split-screen typeLarge typography split across two sides of the screen — each half contrasting in color or background.→
Scroll — 13
Scroll-scrubbed animationAn animation whose progress is directly tied to scroll position — controlled frame-by-frame.→Parallax depth layersDifferent elements move at different speeds as you scroll — creating an illusion of depth.→Horizontal scroll sectionA section that scrolls horizontally while the user scrolls vertically.→Scroll-driven pinningAn element stays fixed on screen while the rest of the page scrolls past — usually while an animation plays.→Progress indicatorA visual indicator that shows how far through the page the user has scrolled.→Scroll velocity skewElements skew in the direction of scroll movement, then snap back — making the page feel elastic.→Sticky storytellingA narrative told through scroll — content changes in sync with scroll while layout stays fixed.→Scroll snapScrolling snaps to defined positions — the page clicks to the next section.→Section wipe transitionOne section slides over or wipes away the previous one as you scroll.→Parallax hero imageThe hero background image moves at a slower rate than the scroll — creating depth.→Scroll-linked videoA video whose playback is controlled by scroll position — frame-by-frame.→Infinite scrollContent loads automatically as the user reaches the bottom — the feed appears to have no end.→Scroll-triggered counterA counting number animation that starts when the stat scrolls into view.→
Cursor & Pointer — 10
Magnetic cursorThe cursor is drawn toward interactive elements as it approaches — snapping as if magnetized.→Custom cursorThe default OS cursor is hidden and replaced with a custom element that follows the mouse.→Cursor trailThe cursor leaves a trail of elements — dots, sparks, or shapes that appear and fade as the mouse moves.→Cursor distortionMoving the cursor warps or distorts elements nearby — usually images — as if a liquid force.→Hover tilt (3D card)An element rotates in 3D to follow the cursor — tilting as if it's a physical object.→Magnetic buttonA button that moves to follow the cursor as it hovers nearby — snapping back on leave.→Cursor spotlightA radial light effect that follows the cursor — illuminating content as if shining a torch.→Sticky hoverAn element sticks to the cursor on hover — following it around before snapping back.→Follow cursor elementAn element — image, label, or card — appears and follows the cursor when hovering over a trigger area.→Repel on hoverElements scatter or move away from the cursor as it approaches — the opposite of magnetic.→
3D & WebGL — 12
Floating 3D objectA 3D mesh that floats in the hero — rotating slowly, reacting to cursor movement.→Shader distortionA GLSL shader applied to an image or mesh that warps, ripples, or distorts it.→Particle systemThousands of small points in space — forming shapes, flowing in fields, or reacting to interaction.→3D textTypography rendered in three dimensions — with depth, extrusion, lighting, and perspective.→WebGL image hoverA hover effect on an image that uses a WebGL shader — stretching, rippling, or burning around the cursor.→Noise terrainA 3D mesh whose vertices are displaced by noise — creating an organic, undulating surface.→Fluid simulationA real-time simulation of fluid dynamics — colors mixing, liquid flowing, reacting to interaction.→3D scroll sceneA Three.js scene whose camera animates through a path driven by scroll position.→Holographic materialA material shader that mimics iridescent, holographic foil — shifting through rainbow colors.→Depth map parallaxA 2D image given the illusion of depth by using a separate depth map — near elements move more.→Glitch shaderA visual corruption effect — horizontal tears, color channel separation, digital artifacts.→Environment mapped meshA 3D object that reflects its environment — reacting to surrounding colors and light sources.→
Page & Layout — 10
Page transitionAn animated transition between two pages — covering, wiping, fading, or morphing from route to route.→Smooth scrollNative scroll is intercepted and replaced with buttery, inertia-based scrolling that feels expensive.→Grid revealGrid items animate into view staggered — appearing one after another as the grid comes into view.→Staggered card entranceCards or list items animate into view with a cascade delay.→FLIP transitionElements animate smoothly between different positions and sizes on the page — using the FLIP technique.→Clip-path revealAn element is revealed by animating a clip-path — content appears through an expanding shape.→Modal entranceThe animation a modal uses to enter the screen — scaling in, fading up, sliding from an edge.→Drawer / panel slideA side panel that slides in from the edge of the screen — overlaying content rather than replacing it.→Elastic layoutLayout elements that respond to resize or interaction with a spring-based elasticity.→Masonry animationA masonry grid where items animate into their calculated positions.→
Hover & Micro-interactions — 12
Elastic buttonA button that squishes and stretches on click — deforming with a spring physics response.→Hover image previewHover over a text link and a preview image appears — following the cursor or in a fixed position.→Link underline drawA hover underline that draws itself from one end to the other rather than appearing instantly.→Button morphA button that changes shape, content, or form on interaction — morphing between states.→Image distortion on hoverImages warp, bend, or ripple when hovered — using WebGL or CSS filters.→Tooltip animationTooltips that animate in with character — spring into position or scale from the anchor point.→Toggle switchA toggle that animates its state change — the knob slides, the background transitions.→Border drawA border that draws itself around an element on hover — animating the stroke from a starting point.→Icon animationIcons that animate on hover — morphing, rotating, bouncing, or switching state.→Color shift on hoverBackground or text color transitions smoothly on hover — often across bold color combinations.→Ripple effectA click spawns a circular ripple that expands and fades from the click point.→Text fill on hoverHovering over text gradually fills it with a new color — as if being painted from one direction.→
Loading & State — 8
Skeleton loaderPlaceholder shapes that mimic the layout of loading content — showing structure before data arrives.→Progress barA bar that fills from left to right indicating completion progress.→SpinnerA rotating indicator signaling that something is loading or processing.→Page preloaderAn intro screen that plays while the page assets load — often branded before content reveals.→Optimistic UIThe interface updates immediately on user action — assuming success — before the server response.→Skeleton shimmerA skeleton loader with an animated light sweep — a shimmer that passes across placeholder shapes.→Success state animationAn animation that confirms a successful action — a checkmark drawing itself, a celebration moment.→Error shakeA form field or element shakes horizontally when validation fails — communicating error through motion.→
Background & Atmosphere — 9
Gradient meshMultiple overlapping radial gradients that blend into an organic, painterly background.→Noise textureA fine grain or noise texture overlaid on backgrounds — adding depth and analog feel.→Animated gradientA background gradient that shifts, rotates, or transitions between color states over time.→Particle backgroundA field of floating particles in the background — dots or points that drift slowly.→Grid / dot patternA subtle repeating grid, dot matrix, or line pattern as a background texture.→Aurora effectSoftly animated, luminous blobs of color that shift like the northern lights.→SVG blob morphOrganic blob shapes that morph between forms — their edges shifting and flowing continuously.→VignetteA darkened edge around the viewport — drawing the eye to the center and adding cinematic depth.→Scanline overlayHorizontal lines overlaid on content — evoking CRT monitors or retro aesthetics.→
Video & Media — 6
Background video loopA muted video playing on loop behind content — adding motion and atmosphere to a hero section.→Video scrub on scrollVideo playback is controlled by scroll position frame by frame.→Image sequence scrollA series of pre-rendered frames swapped in sequence as the user scrolls.→Lottie animationA vector animation exported from After Effects and played in the browser — lightweight and scalable.→Canvas drawingReal-time drawing or generative visuals rendered on an HTML canvas — procedural, infinite variation.→SVG path drawAn SVG path that draws itself — animating the stroke-dashoffset to reveal the line progressively.→