Effects Reference Matrix v2 — Design Builder

A working reference for evaluating and sequencing visual + motion effects in the builder. Organized for triage, not exhaustiveness.

How to read this doc

Complexity scale

Channel codes

Original six:

New in v2:

New in v2.2:

New in v2.3:

For deep coverage of Bi and Dk including chart taxonomy, ESP-specific notes (Klaviyo / HubSpot / Braze / Emarsys / Iterable / GHL), and Marita's monthly performance report template, see the Dashboards & Presentations Playbook companion doc.

Best demo source — the single place to see and reverse-engineer the effect, not the only place it exists.

Channel reality check before you build anything

Original six

Social (S) — Static is exported as PNG/JPG, motion as MP4/GIF. CSS doesn't ship. You're rendering to canvas or pixels. Aspect ratios: 1:1, 4:5, 9:16, 16:9. Mobile-first sizing, text must hold up small.

Ads (A) — Same as social for paid social ads; for HTML5 display ads, file-size budgets are brutal (150KB total is common). Animation is fine but keep assets light. CSS over GIF where you can.

Email (E) — The builder needs to know which of three template archetypes the user is building. Each unlocks a different effect range.

E-img — Image-based email (every effect renders to image, sliced into table rows)

E-txt — Text-based email (Morning Brew, Stripe Press, paulgraham.com newsletter feel)

E-html — Classic HTML email (the middle path — coded tables + inline CSS + a mix of live text and images)

Blogs (B) — Modern browsers, less perf pressure than landing pages, reading is the job. Subtle effects only.

Landing pages (L) — Where you can go biggest. Heavy WebGL, scroll-driven choreography, custom cursors. Watch LCP / CLS.

Product UI (U) — Functional motion only. Skeleton loading, micro-interactions, state transitions. Decorative belongs elsewhere.

New in v2

General web (W) — Small business sites, restaurants, real estate, local services, microsites. Templates territory. Effects should be modern but proven, not avant-garde. The user testing here is "does my client's mom understand the navigation?" Bias to L-lite: subtle gradients, soft shadows, basic scroll reveals, simple parallax, hover lifts. No custom cursors, no WebGL hero, no experimental typography.

Case studies (C) — Long, narrative pieces showing client work. The reader is a prospect evaluating you. Effects should support storytelling without upstaging it. Big imagery, before/after comparisons, scroll-linked metrics counters, sticky figure captions, video embeds with poster + overlay. Tone: documentary, evidence-driven. The trap: making the case study itself flashier than the work it describes.

Portfolio (P) — Personal showcase, freelance lead-gen. Maximum permission for personality and signature effects. Hero impact matters more than info density. Custom cursor and view transitions belong here. Distinctive type, project hover treatments, scroll choreography. The risk: portfolios that load slowly lose the hire. Budget perf carefully if going heavy.

Editorial (D) — Long-form articles, online magazines, newsletters as web pages. Reading is the job. Effects must aid, not interrupt: drop caps, pull quotes, image LUTs, sticky figures, smooth scroll, reading progress, footnote popovers. Restraint over showmanship. Think The Pudding, New York Times Magazine, Polygon features.

Agency sites (G) — The shop's own marketing. Maximum showmanship — the site IS the portfolio. WebGL hero, custom cursor + magnetic CTAs, scroll choreography, kinetic type, View Transitions between routes, distinctive loading sequences. Tone: maximalist, "look what we can do." Trap: looks impressive, can't be maintained, breaks in three months.

Thought leadership / personal brand (T) — Author/speaker/operator sites. Authority + accessibility. Fast-loading, clean type, considered photo treatments (subtle grain, light duotone), gradient text for hooks, simple scroll reveals. The aesthetic is "I take my work seriously but not myself." Avoid: over-designed, anything that delays content. Examples: paulgraham.com (extreme version), naval.com, andrewchen.com.

UGC content (R) — Creator-style, fast-edit, mobile-vertical. The aesthetic is intentionally imperfect. Sticker text, captions overlay, jump-cut style transitions, dirty-flash photography, Y2K type, grain, handheld feel. Adjacent to S but with a "shot on phone" rather than "produced in studio" energy. Effects to lean into: chunky outlined captions, kinetic typography mismatched intentionally, hand-drawn doodles overlaid, glitch transitions, B-roll loops with text. The trap: trying to look UGC but smelling like a brand pretending — keep typography genuinely loud and slightly off-balance.

New in v2.2

Corporate (Co) — Fortune 500, large enterprise, financial services, big-firm professional services. The job is signaling stability, competence, and longevity without looking ossified. The 2026 corporate aesthetic is considered minimalism: high-quality photography with minimal treatment, bento grids for service/capability sections, subtle mesh gradients in brand colors, soft shadows, dark mode pair, clean type with one strong display weight, restrained scroll reveals. No custom cursors, no WebGL hero, no experimental typography, no kinetic display type. The trap on either side: looking like a 2018 corporate template (death by stock photo + blue gradients), OR over-correcting and looking like a startup (which reads as "trying too hard"). Look at ibm.com, deloitte.com (post-2024 refresh), mckinsey.com, jpmorgan.com — the signal is restraint plus polish, never showmanship.

Service-based business (Sv) — Lawyers, accountants, consultants, dentists, healthcare practices, real estate agents, contractors, trades. The job is trust and clarity, in that order. Effects must serve comprehension; anything decorative subtracts. The pick list is intentionally narrow: hero with real photography of real people + credentials/trust signals, soft card shadows on service blocks, simple linear gradients as section backgrounds, scroll reveals (subtle fade-up only), sticky CTA bar, hover lifts on cards, basic dark mode toggle. No motion beyond reveals. No custom cursors. No glass/blur effects. No kinetic typography. The user test is whether your client's mom can navigate it. Modern Sv sites avoid looking template-y by using bento layouts, considered typography (one display font + system), and one or two well-chosen brand accents — not by adding effects.

AI automation tools (Ai) — Zapier, n8n, Make, Lindy, Pipedream, Vellum, Bardeen, Composio, Cursor (in its dev-tool framing). The category has a specific visual vocabulary that signals "this is sophisticated technology made accessible." Effects in heavy rotation: animated workflow node graphs (boxes with connecting lines, animated data flow), terminal/CLI UI elements mixed with polished marketing UI, scroll-driven workflow reveals (the workflow assembles itself as you scroll), mesh gradients in techy palettes (purple/cyan/electric green/dark backgrounds), number counters showing time/$ saved or runs executed, mono fonts mixed with display sans, bento grids showcasing tool integrations with logo tiles, data flow particle streams between components, dark mode-first design with subtle accent colors. The hero pattern: animated workflow demo or 3D node graph + headline + "see it work" CTA. Trap: looking like every other AI-coded vibe-template (counter-trend per Tilda + Fireart reporting). Differentiation comes from showing real workflow value through the design itself.

SaaS marketing (SaaS) — Linear, Vercel, Notion, Stripe, Mercury, Ramp, Anthropic, Framer, Pitch, Cursor, Loom. The 2026 SaaS aesthetic per multiple trend reports (SaaSFrame, Framiq, GridRebels, ui-syntax): dark-mode-first hero with real product UI (not abstract illustrations), bento grids with real product screenshots in each tile, scroll-driven feature reveals, terminal/CLI aesthetic for developer tools (Vercel/Linear pattern), animated product mockup dashboards, subtle mesh gradient hero accents, soft shadows + glass surfaces in nav and overlays, kinetic typography for taglines, customer logo marquees, number counters for social proof (MRR, customers, ARR), embedded interactive demos (Figma-style), Spline 3D for hero accents (sparingly), persistent CTA, persistent dark mode toggle. The differentiator vs Co or W: SaaS sites have permission for more motion and design assertion because the audience expects it. The trap: looking identical to every other YC company. Differentiation comes from how you visualize the product, not how you decorate around it.

New in v2.3

BI / Dashboards / Analytics (Bi) — The only channel where pretty loses to functional. Job is to enable a decision in 5 seconds or less. Two non-negotiable tests: the 5-second test (executive grasps the headline in 5s) and the action test (every metric answers "if this changes, does someone act?"). Effects are restrained: animated number counters on KPI load, skeleton loading states, smooth FLIP transitions on filter change, hover tooltips, period overlay comparisons (ghost line at 40% opacity), anomaly highlighting (subtle pulse on outliers only), drill-down breadcrumbs. Chart selection is informed by data type (line for time-series, horizontal bar for ranking, cohort heatmap for retention, bullet chart for actual-vs-target — never gauges, never pie >5 segments). Color systems are layered: semantic (green/amber/red/blue with fixed meanings), sequential (single-hue light-to-dark for ordered data), categorical (5–8 distinct accessible hues for unordered data). Dark mode is expected for tech audiences. See the Dashboards & Presentations Playbook for chart taxonomy, ESP-specific notes (Klaviyo / HubSpot / Braze / Emarsys / Iterable / GHL), KPI card anatomy, and 5 marketing dashboard core patterns.

Decks / Presentations (Dk) — The most-built and most-poorly-built design output. Job: deliver one idea per slide with the slide title carrying the takeaway. The defining test: hide all body content, show only titles — if the titles alone tell the story, the deck is well-structured. Effects are narrative-supporting: cross-fade as default transition, sequential builds for complex charts (revealed in steps, never bullet-by-bullet animation), number counters on single-stat hero slides, subtle highlight pulses on annotations, slow background gradient shifts on mesh-gradient slides. Typography is the heaviest variable — one display + one body font, max two total. Color is restrained: 3 brand colors + neutrals, one accent. Trending 2026 styles (per Slidesgo's named trends): Editorial-Magazine, Tech Monochrome, Luminous Fade, Analog Dreams, Bold Type, Bento Bold. Deck types differ wildly by audience: investor pitch (10–15 slides) vs monthly performance report (15–25, Marita's daily work) vs sales deck vs conference talk. See the Dashboards & Presentations Playbook for the 15 slide type presets, 12 deck templates, and the opinionated monthly performance report template specific to email marketing client reviews.

Master effects matrix

Photo & image treatments

Effect CSS primitives Complexity Best demo source Channels
Duotone filter + mix-blend-mode (CSS) or SVG feColorMatrix ★★ shapefactory.co/duotone S A E* L B W C P D G T R
Tritone / multi-tone SVG feComponentTransfer per channel ★★★ CodePen "tritone svg" S A L G P
Halftone (CSS/SVG) SVG feMorphology + feColorMatrix, or radial-gradient grid ★★★ CodePen "halftone css" S A L B W D P R
Grain / film noise SVG feTurbulence overlay, or PNG noise tile w/ mix-blend-mode: overlay ★★ Codrops "Grainy Gradients" article S A E* L B W U C P D G T R
Grainy blur (trending 2026) filter: blur() + SVG turbulence overlay ★★★ Godly.website — search "grain blur" S L B G P R T
Direct/dirty flash look (IG Flash filter trend) filter: brightness contrast saturate + harsh vignette + noise ★★★ TikTok #flashfilter S A R P
Vignette box-shadow: inset or radial-gradient overlay ★ MDN radial-gradient docs S A E L B W C P D R
Light leaks Gradient + mix-blend-mode: screen ★★ CodePen "light leak overlay" S A L P R
Glitch / RGB shift clip-path + duplicated layers w/ offset, or SVG feOffset per channel ★★★ css-tricks.com glitch tutorials S A L G P R
Posterize SVG feComponentTransfer w/ tableValues ★★★ MDN feComponentTransfer S A L B D
Sepia / B&W filter: sepia() / grayscale() ★ MDN filter docs S A E* L B W U C D P T
Cross-process / film stocks (LUT) Stacked filter (sat/contrast/hue) or canvas LUT ★★ cssfilters.co S A E* L B C P D R
Polaroid / vintage frame border + box-shadow + rotation transform ★ CodePen "polaroid css" S A L B W C D R
Cutout (clip-path shape) clip-path: polygon() or path() ★★ bennettfeely.com/clippy S A L B W P G
Cinematic letterbox Top/bottom black bars via gradient or absolute divs ★ n/a, trivial S A C P D G T
Long-exposure blur filter: blur() masked region ★★ CodePen blur experiments S A L P

* For email: render the effect to a flattened image and embed.

Backgrounds

Effect CSS primitives Complexity Best demo source Channels
Mesh gradient Layered radial-gradients + blur, or SVG mesh ★★ meshgradient.in, mesher.app S A E* L B W U C P D G T
Animated/shifting gradient linear-gradient + background-position animation ★★ CSS Gradient Animator S A E* L B W G T
Aurora gradient Blurred gradient at angle ★★ gradient.style S A L B G P T
Conic gradient conic-gradient() ★ MDN conic-gradient S A L B U W G
Noise overlay SVG turbulence as background-image ★★ Codrops grainy gradients S A E* L B W U C P D G T
Dot pattern radial-gradient repeat or SVG pattern ★ hero patterns (Steve Schoger) S A E* L B U W T D
Grid pattern linear-gradient cross-hatch ★ CodePen "css grid background" S A L B U W G T D
Stripes repeating linear-gradient ★ MDN repeating-linear-gradient S A E* L B W D R
Paper / fabric texture PNG tile with mix-blend-mode ★ transparenttextures.com S A E* L B W D P
Plasma / wave bg SVG turbulence animated, or canvas ★★★ CodePen "css plasma" S L G P
Video background with overlay <video> + gradient overlay ★★ Awwwards search "video hero" A L G P C
Particle system Canvas via tsParticles ★★★★ particles.js.org S L G P
WebGL shader bg Three.js / OGL fragment shader ★★★★★ shadertoy.com L G P
Animated SVG blob SVG path morph ★★★ blobs.app S A L B W P R

Typography

Effect CSS primitives Complexity Best demo source Channels
Gradient text background-clip: text + color: transparent ★ CSS-Tricks gradient text S A E* L B U W C P D G T R
Image-masked text background-clip: text w/ image bg ★★ CodePen "image text mask" S A L B P G
Outlined / hollow text -webkit-text-stroke or text-shadow ring ★ CodePen "outline text" S A L B P R G
Drop cap ::first-letter + float ★ CSS-Tricks drop cap B D C T
Variable font axes font-variation-settings ★★ v-fonts.com S A L B U W C P D G T
Kinetic typography (huge in 2026) GSAP SplitText + transforms, or CSS animations ★★★ gsap.com/scrolltrigger examples S A L G P R T
Marquee CSS keyframe translateX ★ CodePen "css marquee" S A E* L B W C P G R
Liquid distortion text SVG feTurbulence + feDisplacementMap ★★★★ Codrops liquid text S L G P
Glitch text CSS keyframes + clip-path layers ★★★ CodePen "glitch text" S L G P R
Split character reveal GSAP SplitText / motion.dev ★★★ motion.dev docs S A L B W C P D G T
3D / extruded text stacked text-shadow or CSS 3D transforms ★★ CodePen "3d text css" S A L G P R
Neon glow text layered text-shadow w/ saturated hues ★ CodePen "neon css" S A L P R
Sticker text (trending) thick -webkit-text-stroke + offset shadow ★ Dribbble "sticker type" S A R P
Y2K chrome text (trending revival) Gradient text + bevel via filter or SVG ★★★ Pinterest "chrome type" S A R P
Metallic / bronze type (2026 trend per Kittl) Gradient + noise + inner shadow ★★★ kittl.com templates S A L P G
Scroll-linked text reveal CSS scroll-driven animation animation-timeline ★★ scroll-driven-animations.style L B C P D G T

Containers, cards, surfaces

Effect CSS primitives Complexity Best demo source Channels
Glassmorphism backdrop-filter: blur() + semi-transparent bg ★ glassmorphism.com S A L U W C P G T
Liquid Glass (iOS 26-style, 2026 trend) backdrop-filter + dynamic refraction (SVG displacement) + specular highlight ★★★★ Margarita's Pure CSS kit (linked below) L U G P
Claymorphism rounded radius + soft inset+outset shadow + slight gradient ★★ hype4.academy/tools/claymorphism-generator S A L U W R
Neumorphism (deprioritize) inset + outset shadows on neutral bg ★ neumorphism.io —
Brutalist card (cyberbrutalism trend) 0 border-radius, 1px solid, harsh shadow, no blur ★ brutalist-web.design L B G T D
Soft layered shadow 4-6 stacked box-shadows with varying blur ★ shadows.brumm.af S A L U W C P D G T
Border gradient border-image or padding trick w/ gradient bg ★★ css-tricks.com gradient borders S A L U W G T
Animated conic border conic-gradient + @property for hue rotation ★★★ CodePen Jhey Tompkins conic L U G P
Gooey blob merge SVG feGaussianBlur + feColorMatrix threshold ★★★ CodePen "gooey effect" S L G P R
Magnetic hover JS pointer math + transform: translate ★★★ osmo.supply/magnetic L G P
3D tilt on hover transform-style: preserve-3d + JS tilt ★★★ vanilla-tilt.js L U G P C
Card flip transform: rotateY + backface-visibility ★★ CodePen "css card flip" S A L U W G
Stack reveal (cards on scroll) sticky positioning + scroll-driven animation ★★★ scroll-driven-animations.style L B C P D G
Bento grid CSS Grid w/ asymmetric tracks ★★ bentogrids.com L B U W C P G T
3D image carousel CSS 3D transforms or GSAP ring ★★★ Ana Tudor's pen (linked below) L G P C R
Terminal / CLI UI panel (Ai/SaaS signature) Dark bg + mono font + cursor blink + line highlights ★★ Vercel.com terminal demos, Linear blog Ai SaaS G P L
Bento integration grid (Ai/SaaS signature) CSS Grid w/ logo tiles for tool ecosystem ★★ n8n.io integrations section Ai SaaS Co W

Color systems

Effect CSS primitives Complexity Best demo source Channels
Dark mode @media (prefers-color-scheme: dark) + CSS variables ★★ web.dev color-scheme S A E** L B U W C P D G T
color-mix() blends color-mix(in oklch, ...) ★ MDN color-mix L B U W G T D
OKLCH wide-gamut gradients linear-gradient(in oklch, ...) ★ oklch.com S A L B U W C P D G T
P3 wide gamut accents color(display-p3 ...) w/ sRGB fallback ★ webkit.org P3 color L U G P
Hue rotation animation @property --hue + filter: hue-rotate ★★ CodePen Jhey @property S L G P R
Auto-contrast text color: contrast() (emerging) or JS luminance check ★★ MDN contrast() L B U W T D

** Apple Mail only; Outlook ignores prefers-color-scheme, Gmail partially inverts.

3D & WebGL

Effect CSS primitives Complexity Best demo source Channels
CSS 3D card transforms perspective + transform: rotateY/X ★★ CodePen "css 3d" L U G P
Spline scene embed Spline runtime <spline-viewer> ★★ spline.design L G P
Three.js / R3F scene WebGL via Three or react-three-fiber ★★★★ threejs-journey.com L G P
Image distortion (curtains) curtainsjs.com or Three.js shader ★★★★★ curtainsjs.com examples L G P
3D model viewer <model-viewer> web component ★★ modelviewer.dev A L U C P G W
Shader gradient bg Custom GLSL fragment shader ★★★★★ shadertoy.com L G P

SVG & illustration

Effect CSS primitives Complexity Best demo source Channels
Path drawing animation stroke-dasharray + stroke-dashoffset ★★ css-tricks.com svg line drawing S A L B U W C P D G T
Path morphing GSAP MorphSVG, or <animate> element ★★★ gsap.com/morph S A L G P R
Animated icons Lordicon, Lottie, or hand-coded SVG ★★ lordicon.com A L U W T G C

Motion graphics effects (new comprehensive section)

Motion is its own discipline. The matrix below covers ~70 motion effects organized by what they're FOR rather than how they're built — because most motion problems are "what kind of motion does this moment need" before "how do I implement it."

Page & route transitions

Effect Implementation Complexity Best demo source Channels
Fade transition CSS opacity, View Transitions API ★ developer.chrome.com/docs/web-platform/view-transitions L U W C P D G T
Slide transition transform: translateX/Y ★ motion.dev exit animations L U W G P
Scale transition transform: scale() + fade ★ Framer Motion examples L U G P
Mask wipe transition clip-path: inset() animated ★★★ CodePen "page transition mask" L G P
Curtain pull / page wipe Full-screen overlay slides over ★★ barba.js examples L G P C
Liquid morph transition SVG path morph between routes ★★★★ CodePen "liquid page transition" L G P
View Transitions API (shared element) view-transition-name + browser API ★★★ Chrome dev blog View Transitions L U W G P D
Page flip CSS 3D rotate book-style ★★★ CodePen "css page flip" P G C
Cube rotation CSS 3D transforms on container ★★★ CodePen "css cube" P G
Pixel dissolve / mosaic Canvas pixel manipulation ★★★★ CodePen "pixel transition" P G R

Scroll-driven choreography

Effect Implementation Complexity Best demo source Channels
Reveal on scroll (fade-up) IntersectionObserver or animation-timeline: view() ★★ Codrops on-scroll reveal L B U W C P D G T
Pinned section + progress GSAP ScrollTrigger pin, or CSS position: sticky ★★★ gsap.com/scrolltrigger L C P D G
Horizontal scroll in vertical page GSAP ScrollTrigger or CSS scroll-snap ★★★ osmo.supply horizontal scroll L C P G
Sticky stacking cards position: sticky + scroll-driven CSS ★★ scroll-driven-animations.style L C P D G T
Apple-style scroll-scrubbed image sequence Canvas frame-by-frame or video ★★★★ apple.com/airpods-pro examples L G P C
Scroll-linked SVG path draw stroke-dashoffset + scroll timeline ★★★ CodePen "scroll svg draw" L C P D G
Scroll-driven 3D camera R3F or Spline scroll integration ★★★★★ spline.design scroll examples L G P
Parallax depth (multi-layer) Multi-layer transform: translateY on scroll ★★ scroll-driven-animations.style L B C P D G W
Scroll-snap with momentum CSS scroll-snap-type + Lenis ★★ lenis.studiofreight.com L P G W
Reading progress bar scrollYProgress → width animation ★ CodePen "reading progress" B D T C
Scroll-driven counter IntersectionObserver + count up ★★ CodePen "count up scroll" C L T W
Scroll-tied video playback requestAnimationFrame + currentTime ★★★ github.com/julianlloyd/scrollorama L G P C
Pinned text reveal w/ image cycle ScrollTrigger pin + image swap ★★★ Awwwards "pinned text reveal" L C P G
Animated workflow node graph (Ai signature) SVG nodes + animated stroke connections + scroll trigger ★★★ Zapier.com, n8n.io homepage Ai SaaS G L
Data flow particle stream (Ai signature) Canvas particles flowing along path between nodes ★★★★ Stripe.com payment animations Ai SaaS G L
Animated dashboard mockup (SaaS signature) Lottie or video of product UI with subtle motion ★★★ linear.app, vercel.com hero SaaS Ai G L Co

Text & kinetic typography motion

Effect Implementation Complexity Best demo source Channels
Character stagger reveal GSAP SplitText + stagger ★★★ gsap.com/splittext S A L G P R T
Word stagger Splitting.js + CSS variables ★★ splitting.js.org S A L W C P D G T
Line stagger SplitText by lines + clip-path ★★★ gsap.com/splittext L C P D G T
Mask wipe text reveal clip-path: inset() animated ★★ CodePen "text mask reveal" L C P D G T
Typewriter JS char-by-char or CSS steps() ★ CodePen "typewriter css" B T R W
Word cycling / swap Stack of words + interval swap ★★ CodePen "rotating words" L T W R
Number counter requestAnimationFrame ease ★★ CodePen "counter animation" C L T W U
Variable font weight animation font-variation-settings keyframes ★★ v-fonts.com L P G T D R
Variable font width morph font-variation-settings (wdth axis) ★★ v-fonts.com L P G R
Liquid text distortion SVG feDisplacementMap animated ★★★★ Codrops liquid distortion L G P
Text follows curved path <textPath> in SVG ★★ CSS-Tricks "text on a path" S A L W G P R
Marquee variations (split, ribbon) CSS keyframes + duplicated content ★★ CodePen "css ribbon marquee" S A L B W G R
Scramble / decrypt text JS char swap until target ★★★ CodePen "scramble text gsap" L G P R
Squash-stretch type transform-origin + scaleY/X keyframes ★★ motion.dev examples S A L P R
Wave text per-character transform: translateY w/ sin offset ★★ CodePen "wave text" S A L W P R
Glow pulse / breathing text-shadow keyframed ★ trivial S A L T R

SVG & shape motion

Effect Implementation Complexity Best demo source Channels
Path drawing (stroke-dasharray) stroke-dasharray + offset animated ★★ CSS-Tricks svg line drawing L B C P D G T W
Path morphing GSAP MorphSVG or Flubber.js ★★★ gsap.com/morph S A L G P R
Trim path animation stroke-dasharray w/ % animation ★★ After Effects-style trim L G P U
Blob morph (organic shapes) SVG path keyframes w/ random offset ★★★ blobs.app or Anime.js S A L W P R
Squash and stretch transform: scaleX/Y per principle ★★ motion.dev principles S A U W P R
Wave / ripple SVG path or CSS keyframes ★★ CodePen "css wave" S A L W P R
Gooey merge (metaballs) SVG feGaussianBlur + threshold ★★★ CodePen "gooey merge" S L G P
Loading spinner variations SVG + stroke-dasharray keyframes ★ spinkit, loading.io L U W G T R
Lottie playback Lottie player web component ★★★ lottiefiles.com A L U W T G C R
Rive interactive animation Rive web runtime ★★★★ rive.app/examples L U G P W
Border drawing SVG rect w/ stroke-dasharray ★★ CodePen "border draw" L U W G T
SVG mask reveal <mask> + animated content ★★★ creativeocean's "ScrollTrigger: SVG Text Mask" L G P C
Confetti burst tsParticles emitter, canvas-confetti ★★ catdad.github.io/canvas-confetti U W R L

Image & media motion

Effect Implementation Complexity Best demo source Channels
Ken Burns (slow zoom) transform: scale slow keyframe ★ CodePen "ken burns css" S A L C P D R
Image parallax layers Multi-layer transform on scroll ★★ scroll-driven-animations.style L B C P D G W
Image reveal w/ mask wipe clip-path: inset() animated ★★ CodePen "image mask reveal" L C P D G T
Image reveal w/ blur-to-clear filter: blur() animated to 0 ★ trivial CSS L C P D T W
Image comparison slider Two stacked images + draggable divider ★★★ img-comparison-slider docs C P G W
Image trail on cursor Image cloned on mousemove, fades ★★★ CodePen "image trail cursor" P G
Image distortion on hover curtains.js or Three.js fragment shader ★★★★★ curtainsjs.com examples P G L
Image grid choreography GSAP stagger across grid ★★★ Awwwards search "image grid reveal" L C P G
Photo collage assembly Multiple images animate into position ★★★ CodePen "collage animation" C P D W R
Sprite sheet animation Background-image + steps() animation ★★ CSS-Tricks sprite sheet U W R S
Lazy-load fade-in IntersectionObserver + opacity ★ trivial All except E
Cinemagraph (selective motion) Looping video w/ static mask ★★★ flixel.com examples L P C R
Reverse playback on hover Video element + JS controls ★★ CodePen "video reverse hover" L P R

Cursor & pointer motion

Effect Implementation Complexity Best demo source Channels
Custom cursor with trail Hidden default + tracked div + lerp ★★ CodePen "custom cursor trail" L P G
Magnetic cursor Pointer math + transform on hover targets ★★★ osmo.supply/magnetic L P G
Cursor follow blur / spotlight Radial-gradient mask following pointer ★★★ aceternity.com/components L P G
Inverted / blend-mode cursor mix-blend-mode: difference on cursor ★★ CodePen "blend mode cursor" L P G R
Cursor expansion on hover Scale cursor div on link hover ★★ osmo.supply L P G
Cursor-tied parallax pointer position → transform offset ★★ CodePen "pointer parallax" L P G C
Sticky cursor (snaps to elements) Magnetic + position lerp to target ★★★ Awwwards "sticky cursor" L P G

Layout & FLIP motion

Effect Implementation Complexity Best demo source Channels
FLIP (auto-animate) First-Last-Invert-Play technique ★★★ aulasoftwarelibre.github.io/auto-animate U L W
Reorderable list with springs Framer Motion Reorder, dnd-kit ★★★ motion.dev/docs/react-reorder U L W
Bento grid morphing CSS Grid + auto-animate ★★★ CodePen "bento grid animate" L P G U
Filter transition (Isotope-style) FLIP technique on filtered grid ★★★ isotope.metafizzy.co L P G W C
Stacked cards reveal Translate + scale on enter ★★ CodePen "stacked cards reveal" L U C P W
Drag-to-reorder dnd-kit or native HTML5 drag ★★★ dndkit.com U

UI component motion

Effect Implementation Complexity Best demo source Channels
Modal entrance (fade + scale) CSS keyframes + backdrop ★ trivial U L W
Toast slide-in transform: translateX from offscreen ★ sonner.dev examples U W L
Accordion w/ smooth height Detail/summary + interpolate-size ★★ CSS-Tricks accordion 2026 U L W B T
Tab indicator slide Animated underline translateX to active tab ★★ shadcn/ui tabs U W L
Dropdown reveal transform: scaleY + opacity ★ trivial U W L
Side panel drawer translateX 100% from edge ★ shadcn/ui sheet U L W
Bottom sheet w/ drag Pointer drag + spring snap ★★★ vaul.emilkowal.ski U R S
Pull-to-refresh Scroll position + spring release ★★★ CodePen "pull to refresh" U R
Creative loading spinners SVG keyframes, see "Spinkit" ★★ spinkit.css U W L G R T
Toggle switches w/ physics Spring physics or CSS transition ★★ motion.dev toggle examples U W L
Progress bar fill Width animation, optional shimmer ★ trivial U W L A
Skeleton shimmer Linear-gradient + background-position keyframe ★ CodePen "skeleton shimmer" U W L
Notification badge bounce Spring on count change ★ CodePen "notification bounce" U R S

3D & physics motion

Effect Implementation Complexity Best demo source Channels
CSS 3D rotate/flip transform: rotateY + perspective ★★ CodePen "css 3d flip" L U W G P
Spring physics (general) react-spring, motion.dev, Anime.js v4 springs ★★★ motion.dev/docs/spring L U W G P
3D scroll choreography (Spline) Spline scroll-tied animation ★★★★ spline.design tutorials L G P
WebGL shader animation GLSL fragment shader + time uniform ★★★★★ shadertoy.com L G P
Particle system tsParticles, custom canvas ★★★★ particles.js.org S L G P R
Cloth simulation Three.js MeshPhysics or Verlet integration ★★★★★ Three.js examples cloth G P L
Flag / ribbon physics Verlet integration or shader-based ★★★★ CodePen "ribbon flag" L G P
Liquid / fluid sim WebGL fluid shader ★★★★★ paveldogreat.github.io/WebGL-Fluid-Simulation L G P R
Magnetic field / boids Canvas particle behavior ★★★★ CodePen "boids canvas" L G P

Video & frame-based motion

Effect Implementation Complexity Best demo source Channels
Scroll-scrubbed video Video currentTime tied to scroll ★★★ github.com/julianlloyd/scrollorama L G P C
Frame extraction sequence Canvas drawn from frame array ★★★★ CodePen "frame sequence canvas" L G P C
Video as background + overlay <video autoplay muted loop> + gradient ★★ trivial A L G P C R
Cinemagraph (looping selective motion) Video + static frame composite ★★★ flixel.com L P C R
Reverse playback on hover playbackRate = -1 + state ★★ CodePen "video reverse" L P R
Picture-in-picture transitions requestVideoFrameCallback ★★★ trivial w/ JS U L
Programmatic video w/ Remotion React → MP4 via remotion.dev ★★★★ remotion.dev/docs S A R T

Motion libraries & tools — quick reference

Tool Best for Notes
GSAP Heavy animation timelines, scroll choreography, SplitText Industry standard, now free for commercial (2024)
ScrollTrigger (GSAP) Scroll-linked animation Bundled with GSAP
Lenis Smooth scroll Studio Freight, lightweight
Framer Motion / motion.dev React animation, layout animation, gestures Now framework-agnostic ("Motion")
Motion One Vanilla JS, WAAPI-based, tiny When bundle size matters
Lottie After Effects → web (JSON) LottieFiles ecosystem
Rive Interactive vector animations w/ state machines Better than Lottie for interaction
Theatre.js Motion design IDE inside the browser Replaces AE for code-first motion
Spline 3D scenes drag-and-drop Embeds as web component
Three.js / R3F Custom WebGL The heavyweight
p5.js Creative coding sketches Generative art
Anime.js v4 Lightweight animation w/ springs New scope/timeline syntax
Auto-Animate Drop-in FLIP for any DOM change Zero-config
View Transitions API Browser-native cross-document transitions Chrome + Safari, Firefox flagged
Remotion Programmatic MP4 via React Render videos from data

Channel quick-pick lists

Social (S) — top picks

Tactile, slightly retro, motion-aware, mobile-first.

  1. Grain / grainy blur
  2. Duotone
  3. Direct/dirty flash treatment
  4. Kinetic typography (character stagger)
  5. Mesh + noise backgrounds
  6. Sticker text / chunky outline type
  7. Y2K chrome / metallic type
  8. Halftone
  9. Glassmorphism cards over imagery
  10. Marquee text rows
  11. Squash-stretch shape motion
  12. Wave text

Ads (A) — top picks

Constraint: file size + autoplay rules + viewability.

  1. Animated gradient backgrounds
  2. Kinetic typography for headlines
  3. Bold gradient text + outline combos
  4. Lottie animations (small file, scalable)
  5. Duotone product imagery
  6. Conic gradient borders around CTAs
  7. 3D model viewer for product spins
  8. Soft layered shadow on product shots
  9. Cinematic letterbox
  10. Programmatic video w/ Remotion for scaled creative
  11. Tom Miller-style 3D panorama or photo grid choreography (your creativeocean pens)

Email (E) — top picks split by build archetype

The right effect depends entirely on which of your three template types the user picks. Surface only the relevant list once the archetype is chosen.

E-img (Image-based email) — top picks

Any effect from the matrix can ship. The interesting question is which effects justify the image-based archetype over E-html. Lean into:

  1. Duotone / tritone hero imagery — fully designed, no client rendering risk
  2. Halftone treatments on product/photo blocks
  3. Mesh + grain background headers
  4. Kinetic typography rendered as GIF for hero animation
  5. 3D carousel rendered as GIF loop for product showcases (Ana Tudor's pen as base)
  6. Liquid Glass cards rendered as PNG with the trend baked in
  7. Cinematic image LUTs for editorial-feel campaigns
  8. Bento grid layouts as a single composed image (vs. table-built)
  9. Custom display typography (variable font axes, metallic/bronze type, sticker text)
  10. Direct/dirty flash photo treatment for product or lifestyle imagery
  11. Glitch / RGB shift accents for sale or launch moments
  12. Polaroid framing for testimonial / UGC sections

Build pattern: artboard at 600px wide (or 1200px @2x for retina), slice horizontally into rows matching content blocks, each row gets <img> with alt text + image-block fallback bg color. Animated blocks export as GIF, capped at ~1MB.

E-txt (Text-based email) — top picks

Live text only. The effect range is intentionally narrow; signature comes from typographic discipline.

  1. System variable font weight contrast — heavy headline, regular body (system fonts include variable axes on modern OS)
  2. Drop cap via <span class="dropcap"> with inline float: left; font-size: 4em; line-height: 0.8
  3. Pipe-separated metadata lines — 5 min read | March 15 | Drift Weekly
  4. Unicode block dividers — ━━━━━━━━━━ or ░▒▓█ for accent rows
  5. Emoji as visual hook — single emoji prefix per section (📊 Performance / ⚡ Quick wins / 🔧 How-to)
  6. Color accent on key phrases via inline <span style="color: ...">
  7. Hex-color blockquote bar via left border on a single-cell table
  8. Numbered list as section structure (1. — / 2. — / 3. —)
  9. Single-line callouts with em-spaced uppercase letterforms via letter-spacing
  10. Dark mode awareness via color choices (avoid pure black/white; use #1a1a1a / #f5f5f5 pairs)
  11. <hr> with custom inline style for section breaks
  12. Inline links with underline-only styling (no buttons; the link IS the CTA in text-mode)

Signature accounts to study for this archetype: Morning Brew, Stratechery, Lenny's Newsletter, Stripe Press updates, every paulgraham.com essay-as-email.

E-html (Classic HTML email) — top picks

The hybrid path. Pick effects with reliable cross-client support; rasterize anything else as an inline image block.

  1. Linear gradient backgrounds (Apple Mail / Gmail web; PNG fallback for Outlook via VML)
  2. Bulletproof buttons with <table> + VML conditional for Outlook
  3. Dark mode color pairs via @media (prefers-color-scheme: dark) (Apple Mail honors, Outlook ignores, Gmail partial)
  4. Animated GIFs as the universal motion fallback — kinetic type, marquee, counter, simple reveals all become GIFs
  5. Simple border-radius cards with box-shadow (Apple Mail/Gmail; Outlook drops shadow gracefully)
  6. Dot / grid / stripe pattern backgrounds as repeating tile images
  7. <marquee> tag — still works surprisingly across most clients for ticker effects
  8. Polaroid / framed images via table cell with border + padding + slight rotation (via inline transform: rotate() — works in Apple Mail and Gmail web)
  9. Bento grid layouts built as nested <table> rows with rowspan/colspan
  10. Hover effects on links — :hover color change works in Apple Mail / Gmail web
  11. AMP for Email components (Gmail + Yahoo only) — interactive carousels, accordions, forms with submission
  12. Inline images for any effect outside this list — duotone hero, mesh gradient header, custom display typography all ship as PNG blocks embedded in the HTML flow

Build pattern: 600px outer table, single-column or hybrid-fluid layout, all CSS inlined, all decorative effects pre-rendered as images, all interactive elements degrade to simple links/buttons for Outlook. Test in Litmus or Email on Acid before every send.

Blogs (B) — top picks

  1. Drop caps
  2. Scroll-driven reading progress bar
  3. Pull quote treatments
  4. Subtle parallax on hero images
  5. Reveal on scroll for figures
  6. Image grain / cinematic LUT for editorial photos
  7. Sticky figure captions
  8. Bento grid for resource sections
  9. Smooth scroll (light touch)
  10. Number counters for stats

Landing pages (L) — top picks

Where you spend the complexity budget.

  1. Scroll-driven choreography (sticky stacks, pinned reveals)
  2. WebGL or Spline hero (if perf allows)
  3. Magnetic cursor on CTAs
  4. Liquid Glass / refractive surfaces
  5. Animated mesh + grain backgrounds
  6. Kinetic + split-character text on hero
  7. Custom cursor with hover states
  8. 3D card tilt on feature grids
  9. Conic gradient animated borders on accent cards
  10. View Transitions between sections
  11. Apple-style scroll-scrubbed image sequence for product showcases
  12. 3D image carousel (Ana Tudor's CSS pen)

Product UI (U) — top picks

Motion serves function.

  1. Skeleton loading w/ shimmer
  2. View Transitions between routes
  3. Subtle glassmorphism for nav and overlays
  4. Animated icons on state change
  5. Soft layered shadows for elevation hierarchy
  6. Mesh gradient brand backgrounds in empty states
  7. color-mix() for theming
  8. Bento grid dashboard layouts
  9. Micro-interactions on form fields
  10. FLIP / Auto-Animate for list changes
  11. Toast slide-ins
  12. Spring physics on toggles and switches

General web (W) — top picks

Templates, small business, modern but proven.

  1. Linear/radial gradients as section backgrounds
  2. Soft shadow card grids
  3. Reveal on scroll (subtle fade-up)
  4. Image blur-to-clear on load
  5. Bento grid for service / feature sections
  6. Variable font size scaling
  7. Dark mode toggle
  8. Sticky nav w/ scroll-tied background
  9. Smooth scroll
  10. Number counters for stats
  11. Simple parallax on hero
  12. Hover lift on cards

Case studies (C) — top picks

Narrative-driven, evidence-led.

  1. Image comparison slider (before/after)
  2. Scroll-driven counters (metrics)
  3. Pinned section + progress (per-phase reveal)
  4. Sticky figure captions
  5. Cinematic image LUT
  6. Big imagery + subtle Ken Burns
  7. Pull-quote treatments
  8. Stacked cards on scroll for milestones
  9. Video scrub on scroll for process visuals
  10. Image grid choreography for outcomes
  11. Scroll-linked SVG path draw for process diagrams
  12. Sticky header w/ project metadata

Portfolio (P) — top picks

Permission for personality.

  1. Custom cursor (with trail or magnetic)
  2. WebGL or Spline hero
  3. Scroll choreography (pinned, horizontal sections)
  4. View Transitions between projects
  5. Image distortion on hover (curtains.js)
  6. Kinetic + variable font display type
  7. Image grid choreography
  8. Mask wipe page transitions
  9. Magnetic CTAs
  10. Cinematic letterbox + grain
  11. Reading progress bar on case-study pages
  12. Liquid Glass detail panels

Editorial (D) — top picks

Reading is the job.

  1. Drop caps
  2. Reading progress bar
  3. Pull quote w/ accent treatment
  4. Sticky figure captions
  5. Smooth scroll
  6. Subtle parallax on hero images
  7. Image LUT / cinematic photo treatment
  8. Footnote / annotation popovers (link hover reveal)
  9. Variable font for headlines, system for body
  10. Section break ornaments (SVG)
  11. Scroll-linked SVG diagrams
  12. Grain overlay for editorial photo treatment

Agency sites (G) — top picks

Showmanship is the brief.

  1. WebGL or Spline hero
  2. Custom cursor + magnetic CTAs
  3. Scroll choreography (pinned, sticky stacks, horizontal)
  4. View Transitions between routes
  5. Distinctive loading sequence
  6. Kinetic typography (character + line stagger)
  7. Image distortion on hover
  8. 3D card tilts on work grid
  9. Mask wipe transitions
  10. Liquid Glass surfaces
  11. Custom 404 / Easter eggs
  12. Bold gradient + grain backgrounds

Thought leadership / personal brand (T) — top picks

Authority + accessibility. Don't overdesign.

  1. Variable font headlines, restrained body
  2. Subtle photo treatments (light grain, slight duotone)
  3. Gradient text for hooks
  4. Reading progress bar
  5. Drop caps on long-form
  6. Dark mode pair
  7. Linear gradient section backgrounds
  8. Simple scroll reveals (fade-up)
  9. Sticky author/topic header
  10. Number counters for credentials
  11. Subtle marquee for client/publication logos
  12. Typewriter for hero copy (sparingly)

UGC content (R) — top picks

Imperfect, fast-edit, mobile-vertical.

  1. Sticker text / chunky outline captions
  2. Squash-stretch typography
  3. Glitch transitions
  4. Direct/dirty flash photo treatment
  5. Y2K chrome type
  6. Kinetic typography (intentionally mismatched)
  7. Caption overlay (TikTok-style)
  8. Grain + film texture
  9. Jump-cut transitions (frame-based)
  10. Hand-drawn doodle overlays
  11. Wave / squash text
  12. Programmatic video w/ Remotion for batch creator-style content

Corporate (Co) — top picks

Considered minimalism. Restraint over showmanship.

  1. Bento grid for service / capability sections (real screenshots / data, not illustrations)
  2. Subtle mesh gradient in brand colors for section accents
  3. Soft layered shadows on cards (4–6 stacks, large blur radius)
  4. Dark mode pair via CSS variables — table stakes for enterprise audiences
  5. Reveal on scroll (fade-up only, no parallax)
  6. High-quality photography w/ light grain or subtle B&W treatment
  7. Variable font size scaling for fluid headlines
  8. Number counters for scale signals (employees, clients, years, $ deployed)
  9. Sticky nav w/ scroll-tied background opacity
  10. Linear gradient section backgrounds in brand palette
  11. Customer/partner logo marquee (slow, dignified pace)
  12. OKLCH wide-gamut color for brand precision

Service-based business (Sv) — top picks

Trust + clarity. Narrow on purpose.

  1. Real photography of real people, real spaces (no stock, no AI)
  2. Soft shadow service cards in a clean grid
  3. Sticky CTA bar ("Book a consult" / "Get a quote") persistent on scroll
  4. Linear gradient section backgrounds (very subtle, light)
  5. Hover lift on cards (translateY + shadow expansion only)
  6. Number counters for trust signals (years in practice, cases won, clients served)
  7. Testimonial cards with photo + name + role + quote (consistent layout)
  8. Bento grid for service/specialty sections
  9. Reveal on scroll (fade-up only, subtle)
  10. Dark mode toggle (becoming expected even in conservative categories)
  11. Drop shadow on credential badges (bar admissions, certifications, awards)
  12. Sticky "trust strip" below hero (logos of recognizable clients/press)

AI automation tools (Ai) — top picks

Workflow vocabulary + dark-mode-first + technical signaling.

  1. Animated workflow node graph in hero — the category's signature effect
  2. Terminal / CLI UI panel in feature sections (Vercel/Linear pattern)
  3. Data flow particle stream between connected components
  4. Mesh gradient in techy palette (deep purple, cyan, electric green on dark)
  5. Bento integration grid with tool logos (signals ecosystem breadth)
  6. Number counters for runs executed, hours saved, $ ROI
  7. Scroll-driven workflow reveal — the workflow assembles as you scroll
  8. Mono font + display sans pairing for technical credibility
  9. Animated dashboard mockup showing the automation in action
  10. Code typing animation for "here's how simple it is" moments
  11. Conic gradient borders on premium CTAs
  12. Dark mode default with subtle accent colors only

SaaS marketing (SaaS) — top picks

Linear/Vercel/Notion vocabulary. Product-first, real screenshots, dark-mode default.

  1. Real product UI screenshot in hero (Linear-style, not abstract illustration)
  2. Bento grid w/ real product UI tiles for feature sections
  3. Animated dashboard mockup with subtle motion (Lottie or video)
  4. Terminal / CLI aesthetic for developer-focused sections
  5. Dark mode hero w/ subtle mesh gradient accent
  6. Scroll-driven feature reveals (sticky stacks, pinned text + visual swap)
  7. Customer logo marquee for social proof
  8. Number counters (MRR, customers, ARR, time saved)
  9. Spline 3D hero accent (sparingly — one focal element, not the whole bg)
  10. Soft glass surfaces on nav, command palette, modals
  11. Kinetic typography for tagline reveal
  12. Embedded interactive demo (Figma-style) above the fold
  13. Persistent dark mode toggle + CTA in nav
  14. Aceternity-style UI components for landing sections

BI / Dashboards (Bi) — top picks

Function over decoration. 5-second test + action test on every element.

  1. KPI cards with big number + delta arrow + comparison + sparkline + threshold color
  2. Cohort retention heatmap (the only chart that does retention well)
  3. Line chart w/ period overlay (ghost dotted line for comparison period)
  4. Horizontal bar chart for rankings (always, never vertical bar for >10 items)
  5. Funnel chart for conversion stages
  6. Sankey diagram for cross-channel flow
  7. Bullet chart for actual vs target (replaces gauges entirely)
  8. Animated number counter on KPI load (snap to value, never loop)
  9. Skeleton loading matching final layout (no centered spinners)
  10. Hover tooltips anchored to data points
  11. Sticky filter bar + frozen table headers
  12. Drill-down breadcrumbs with smooth view transitions
  13. Anomaly highlighting — subtle pulse on outliers only
  14. Data freshness timestamp always visible
  15. Semantic color system — green/amber/red/blue with fixed meanings
  16. Dark mode default for tech audiences, light for executive

Decks / Presentations (Dk) — top picks

Title-as-message, one idea per slide, narrative-led.

  1. Title slide with single visual anchor
  2. Section dividers every 4–6 slides for rhythm
  3. Single-stat hero slide for headline KPIs (big number + one-line context)
  4. Bento grid summary slide (replaces "executive summary with 8 bullets")
  5. Chart-led slide — title carries takeaway, chart fills canvas, one-line context
  6. Two-column compare (before/after, problem/solution)
  7. Three-column feature (equal-weight grid for benefits or findings)
  8. Quote + chart hybrid (testimonial bridged with data)
  9. Soft layered shadows on cards (Linear-style depth)
  10. Subtle mesh gradient backgrounds for section variation
  11. Number counter animations on stat slides (Tome/Gamma-style)
  12. Cross-fade transitions as default (no push, no cube)
  13. Sequential build for complex charts (revealed in steps)
  14. Editorial-Magazine or Tech Monochrome style as foundation
  15. One display + one body font discipline
  16. 3 brand colors + neutrals + one accent, no more

Inspiration pens — analyzed

The ten pens you shared, with builder use cases. Two clearly identified, six inferred from creator's known body of work, two unidentified.

Clearly identified

Ana Tudor — Pure CSS 3D animated carousel (codepen.io/thebabydino/pen/dPXVyqN)

Heavily-commented, minimal-code 3D ring carousel done entirely in CSS. No JS dependency. Tagged in matrix as 3D image carousel.

Margarita — Pure CSS Glassmorphism Liquid Glass UI kit (codepen.io/Margarita-the-solid/pen/NPRPBjd)

A direct hit on the Liquid Glass trend (Apple's iOS 26 visual language). Pre-built cards, buttons, surfaces with refractive glass treatment.

Inferred from creator pattern

Olivier C — likely CSS-only hover/flip interaction (codepen.io/ol-ivier/pen/MYjvQzg)

Olivier's catalog is heavy on pure-CSS hover and flip card interactions. Builder use: interactive card preset for product grids and feature sections.

Tom Miller (×2) — ad-style 3D/GSAP animations (emBOove, dPOvbPB)

Tom Miller (creativeocean) builds animated content for online ads professionally. His catalog includes 3D photo carousels, parallax photo grids, SVG text masks, and GSAP scroll choreography.

Jhey Tompkins — UI micro-interaction (codepen.io/jh3y/pen/gbLMWYv)

Jhey's signature is whimsical, technically inventive micro-interactions — sliders, conic-gradient borders, scroll-driven CSS, recent shimmer accordions.

VoXelo — WebGL particle / generative effect (codepen.io/VoXelo/pen/dPMeGze)

VoXelo's catalog is WebGL particle FX and neural network visualizations.

Kevin Gutowski — button / hover UI effect (codepen.io/KevinGutowski/pen/QwNZYzL)

Kevin's pens cluster around button outline / hover effects with offset shadows.

Unidentified — need a screenshot or one-liner

Social by platform — trending May 2026

Social (S) is one channel in the matrix but the platforms underneath it have meaningfully different visual vocabularies. Use this section to set platform-specific defaults in the builder.

Instagram

Specs

Format dominance

Trending effects (2026)

  1. IG Flash filter aesthetic — direct/dirty flash photo treatment (still peaking)
  2. Editorial magazine carousels — heavy serif typography, light backgrounds w/ grain
  3. Behind-the-scenes documentary feel — handheld, candid, intentional imperfection
  4. Liquid Glass UI as content (designers showcasing the trend itself)
  5. Throwback / vintage photo treatments — Polaroid, sepia, cross-processed
  6. Grainy blur photo backgrounds w/ overlaid sans-serif text
  7. Kinetic typography on Reels matching audio beats
  8. Parallax photo grid Reels (Tom Miller / creativeocean style)
  9. Sticker text overlays on Stories
  10. Spline 3D backgrounds for premium-feel Reels

Builder defaults for IG: 4:5 artboard by default, font sizing tested at small mobile scale, export as PNG for static / MP4 for Reels / multi-page PDF or PNG sequence for carousels.

TikTok

Specs

Format dominance

Trending effects (2026)

  1. Chunky outlined caption text at bottom — CapCut-native style, intentionally large
  2. Kinetic typography matching audio beats — word-by-word reveal on accent
  3. Direct-flash photo treatment when using Photo Mode
  4. "I have therapy" POV format + reveal montage
  5. Jump-cut transitions between every B-roll clip
  6. Y2K aesthetic — chrome type, butterflies, low-fi
  7. "2026 is the new 2016" nostalgia — Snapchat-era filters, oversaturated
  8. Anti-design / messy intentional aesthetic — hand-drawn doodles, mismatched fonts
  9. Stickers and emoji overlays for emphasis
  10. Glitch transitions between scenes
  11. Grain + film texture overlay on everything
  12. Native CapCut effects (glow, glitch, motion blur) integrated, not replaced

Builder defaults for TikTok: 9:16 artboard, safe zone overlay visible during design, font min 60px for captions, export as MP4 with sticker layer as optional separate file for CapCut import.

X (Twitter)

Specs

Format dominance

Trending effects (2026)

  1. Screenshot quotes on light backgrounds (Glasp / Twemex style)
  2. Bento composite "shipped" graphics showing multiple product UI snippets
  3. Dark mode screenshots for premium tech feel
  4. Light mode screenshots for accessibility-focused content
  5. Aceternity-style UI in promotional posts
  6. Chart-from-data posts (clean axis, single data point highlighted)
  7. Code snippet cards w/ syntax highlighting (Ray.so, Carbon, Codeimage style)
  8. Light noise / grain on solid backgrounds for non-screenshot graphics
  9. Variable font headline + system body for text-heavy graphics
  10. Tweet-quote graphics w/ author photo + handle (Glasp-style)

Builder defaults for X: 16:9 artboard for cards, dark + light mode toggle visible during design, screenshot mode preset (rounded corners + drop shadow on inner content).

LinkedIn

Specs

Format dominance

Trending effects (2026)

  1. PDF carousel as primary format — 1080×1350, 7–10 slides
  2. Strong hook on slide 1 — bold question or counter-intuitive claim
  3. Muted off-white backgrounds OR fully dark mode (no pure white)
  4. Framework / formula graphics — visual structure for an idea
  5. Charts/graphs from interesting data w/ single highlight
  6. Soft shadows on cards within slides
  7. Drop shadow behind text for hierarchy emphasis
  8. Brand-color accents on muted backgrounds (one accent color used consistently)
  9. Bento summary slide at the end
  10. Headline + framework + CTA three-part slide structure
  11. Photo + headline + insight founder-credibility format
  12. Author photo + bio + CTA as final slide

No animation in PDF carousels — static only. Motion content goes in native LinkedIn video posts.

Builder defaults for LinkedIn: 1080×1350 artboard, multi-slide template (7–10 pages), min font 28px for mobile readability, PDF export only, embedded fonts forced on export, file size cap at 2.5MB.

Pinterest

Specs

Trending effects (2026)

  1. Heavy serif typography — display weight, large
  2. Big title with subtitle layered — magazine-cover hierarchy
  3. Editorial / magazine-style photo + text composition
  4. Drop caps and big initial letters
  5. Earthy / muted color palettes (less saturated than IG)
  6. Aspirational lifestyle photography with light grain
  7. Recipe / how-to cards with numbered steps visible
  8. Mood board composites (3–6 image grids)
  9. Infographic-style pins for high saves
  10. Idea Pins (multi-page) for tutorials and step-by-step

Builder defaults for Pinterest: 1000×1500 artboard, serif-default text style, muted palette suggestions, multi-page mode for Idea Pins.

Threads / Bluesky

Specs

Trending effects (2026)

Builder defaults: same as X but with whitespace-emphasis preset.

YouTube Shorts

Specs

Differences from TikTok

Trending effects (2026): largely overlap with TikTok but lower on anti-design, higher on clean infographic-style overlays, higher on tutorial-screen-recording aesthetic.

Builder defaults: same 9:16 as TikTok + thumbnail (1280×720) export option.

Cross-platform recommendation

If a user is shipping to multiple platforms from one creative, the safe single-artboard size is 1080×1350 (4:5 portrait) — fits IG feed natively, works as LinkedIn PDF slide, crops cleanly to 9:16 for Stories/Reels/TikTok with safe-zone planning, and downsizes to 1:1 if needed. Build the artboard at this size and let the builder handle per-platform crop + safe-zone overlays.

Trends to deprioritize / skip

Suggested build order

  1. Phase 1 (CSS-only foundations, ★ to ★★): linear/radial/conic gradients, mesh gradient generator, noise overlay, gradient text, outline text, neon glow, dark mode toggle, border-radius/shadow presets, dot/grid backgrounds, simple keyframe animations, reveal on scroll, basic parallax, skeleton shimmer, fade transitions, marquee, typewriter.

  2. Phase 2 (compound effects, ★★ to ★★★): duotone (SVG filter route), grain + grainy blur, glassmorphism, claymorphism, brutalist card preset, kinetic typography (GSAP SplitText), scroll-driven reveal, sticky stacking cards, sticker text, animated conic borders, bento grid presets, Lottie embed, FLIP/Auto-Animate, modal/toast/drawer motion, custom cursor (basic), spring toggles.

  3. Phase 3 (advanced, ★★★ to ★★★★): halftone, glitch, liquid distortion text, magnetic cursor, 3D tilt, scroll choreography (sticky stacks, horizontal sections, pinned reveals), View Transitions, image-masked text, scroll-scrubbed image sequences, path morphing, Rive embeds, image comparison slider.

  4. Phase 4 (heavy / specialist, ★★★★ to ★★★★★): Liquid Glass surfaces (use Margarita's kit as starting point), Spline embeds, Three.js / shader backgrounds, particle systems, WebGL image distortion, cloth/fluid simulations, custom GLSL shaders.

  5. Cross-cutting infrastructure:

    • Email template-type router — the builder asks "image-based, text-based, or HTML?" up front when Email channel is selected, then surfaces only the effects matching that archetype's pick list. For E-img, every effect from the matrix is in scope (auto-rasterize). For E-html, surface E-html picks + offer "render as image" toggle on any other effect. For E-txt, restrict to the E-txt pick list.
    • Motion library decision — pick one of {GSAP, Motion, Anime.js v4} as primary, Lottie for AE imports, Rive for interactive vectors.
    • Export pipeline — same effect → HTML, MP4, GIF, PNG with channel-aware constraints. For E-img, slicing logic at 600px wide with image-block fallback bg + alt text per slice. For E-html, inline-CSS export with VML conditional for Outlook.
    • Channel-aware presets — when a user picks a channel (or email archetype), incompatible effects either grey out or auto-route through the appropriate fallback.

Demo source quick reference

Source Best for
CodePen Live editable demos of any named effect
Codrops Tutorials + full working compound effects
MDN CSS primitive reference
CSS-Tricks Almanac Property-level reference w/ examples
Godly.website Production-context inspiration
Awwwards High-end landing pages, agency / portfolio sites
Land-book Curated marketing site library
Mobbin Mobile UI patterns in context
details.so Micro-interactions and product UI details
caniemail.com Email client CSS support lookup
scroll-driven-animations.style Scroll-driven CSS examples
shadertoy.com WebGL shader source code
lottiefiles.com Free + paid Lottie animations
rive.app Interactive vector animations
bentogrids.com Bento grid layout inspiration
osmo.supply Webflow-ready magnetic + interaction effects
motion.dev Motion library docs + examples (formerly Framer Motion)
gsap.com GSAP + ScrollTrigger + SplitText examples
lenis.studiofreight.com Smooth scroll examples
spline.design 3D scene templates
kittl.com Typography + poster templates (metallic/bronze type)
siteinspire.com Editorial + portfolio site library
httpster.net Editorial + agency site library
typewolf.com Typography in context
aceternity.com/components React UI components w/ motion
shadcn/ui Component primitives
theatrejs.com Browser-based motion design IDE
remotion.dev Programmatic video generation

Last verified against current trend reporting: May 2026. v2 additions: Motion graphics section (~70 effects), seven new channel codes (W/C/P/D/G/T/R), inspiration pens analysis. v2.1 update: Email channel split into three build archetypes (E-img / E-txt / E-html), each with distinct effect support and quick-pick lists. Builder routing logic updated in cross-cutting infrastructure. v2.2 update: Four new channel codes (Co Corporate, Sv Service-based business, Ai AI automation, SaaS marketing). New effects added to matrix: terminal/CLI UI, bento integration grid, animated workflow node graph, data flow particle stream, animated dashboard mockup. New section: Social by platform (Instagram, TikTok, X, LinkedIn, Pinterest, Threads/Bluesky, YouTube Shorts) with platform-specific specs, format dominance, and trending effects. v2.3 update: Two new channel codes (Bi BI/dashboards/analytics, Dk decks/presentations). Quick-pick lists added for both. Deep coverage of chart taxonomy, ESP-specific reporting notes (Klaviyo / HubSpot / Braze / Emarsys / Iterable / GHL), KPI card anatomy, marketing dashboard core patterns, slide type presets, and an opinionated monthly performance report template moved to the dedicated Dashboards & Presentations Playbook companion doc.