Frontend Atlas

The implementation layer for premium front ends. Sibling skills judge whether and what (

taste-skill

anti-slop rules,

impeccable

critique/audit/polish,

soft-skill

minimalist-skill

brutalist-skill

). This skill knows how: verified, copy-pasteable recipes for the motion, scroll, type, hover, transition, background, shader and component effects that ship on the best sites in 2026, plus the judgment to pick the right one and tune it until it feels inevitable.

Verified 2026-09-27 against: gsap 3.15 (every plugin free, new SplitText), @gsap/react 2.1, motion 13.4 (

motion/react

), lenis 1.3 (

lenis/react

), three r186, @react-three/fiber 9.8, drei 10.7, animejs 4.5, tailwindcss 4.3, next 16.3, react 19.3. All TS/TSX recipes type-check against those packages; the signature recipes were run in Chromium and audited with the scripts below. Project rules beat this file (a project that is "GSAP only" stays GSAP only).

How to use

Write the Design Read (below) before any code. Five lines, no more.
Find the effect: the shortlist below, or search
```
references/INDEX.md
```
(every recipe with its anchor).
Open ONLY the section you need. Reference files are long (700-3000 lines); never load them whole unless you are choosing between many options (then read that file's Decision guide table first).
Copy the recipe, then tune the values under Tune to the chosen motion personality.
Verify in a real browser with
```
scripts/motion-audit.mjs
```
(see Verification). Not watched = not done.

Reference map

File	Open when
`references/INDEX.md`	Looking up any effect by name (474 entries, grouped by file).
`references/motion-principles.md`	Easings, durations, springs, stagger, choreography, 7 motion personality presets. Read before any animation-heavy build.
`references/scroll-gsap.md`	Lenis smooth scroll, ScrollTrigger reveals, pinning, scrub, horizontal galleries, stacked cards, SplitText on scroll, image sequences, video scrub, Flip, Observer slides, refresh discipline.
`references/scroll-css-native.md`	Zero-JS scroll effects: `animation-timeline: scroll()/view()` , progress bars, reveals, parallax, CSS carousels, `scroll-state()` queries, fallbacks, native-vs-GSAP split.
`references/css-modern.md`	`@starting-style` , dialog/popover, anchor positioning, `interpolate-size` , `@property` , container/style queries, `:has()` , OKLCH, `text-wrap` , `sibling-index()` , `corner-shape` , customizable select, Tailwind v4 mapping, support matrix.
`references/text-effects.md`	Split-text reveals, scramble, typewriter, rotating words, text roll, variable-font play, marquees, counters, gradient/shimmer text, text on path, fitted wordmarks, kinetic intros.
`references/typography.md`	Type scale, fluid type, tracking/leading, OpenType, 27 font pairings with sources and licences, loading without CLS, editorial type layouts.
`references/interactions.md`	Custom cursor, magnetic, hover reveals, image trail, button/link hovers, tilt, spotlight cards, tabs indicator, accordion, popovers, toasts, drawers, dock, drag, micro-feedback, feel-tuning table.
`references/page-transitions.md`	View Transitions (same-doc, cross-doc), React `<ViewTransition>` in Next 16, shared elements, GSAP overlay transitions, Swup/Barba/Astro, preloaders, intro gating, fullscreen menus, route hygiene.
`references/backgrounds-svg-canvas.md`	Mesh/aurora/grain/grid backgrounds, conic borders, SVG draw/morph/goo/displacement, canvas particles/dot grids/flow fields, Lottie vs Rive.
`references/webgl-shaders-3d.md`	WebGL loading shell, shader library (GLSL), image distortion, DOM-to-WebGL galleries, fluid cursor, particles, R3F glass hero, globes, post-processing, Paper Shaders, WebGPU/TSL.
`references/component-recipes.md`	67 named components (21st.dev, Aceternity, Magic UI, React Bits, Motion Primitives, Cult UI...): install commands, self-owned code, overuse scores, section combos.
`references/color-surfaces.md`	OKLCH ramps, semantic tokens, contrast (WCAG/APCA), dark mode, gradients, glass and liquid glass, shadows, borders, radius, image treatment.
`references/layout-composition.md`	Breakout grid, 12-col/subgrid, fluid space, 10 hero skeletons, bento, section patterns, sticky/overlap layouts, navigation, responsive strategy.
`references/aesthetic-directions.md`	Choosing or executing one of 30 visual directions, each with tokens, fonts, motion signature, real reference sites, AI-slop tells.
`references/libraries.md`	Choosing/setting up any of 37 libraries: size, install, SSR caveats, status, recommended stacks per project type.
`references/performance-a11y.md`	Before shipping anything animated: property cost, jank debugging, pausing offscreen work, CLS from pins, reduced motion done right, WCAG motion criteria, QA checklist.
`references/inspiration-sources.md`	Finding references, components, fonts, icons, assets, tools; reverse-engineering an effect seen on a live site.

Effect shortlist (most requested)

Effect	Where
Smooth scroll (Lenis on the GSAP ticker)	`scroll-gsap.md#1-setup-and-lenis-sync`
Reveal on scroll, zero JS	`scroll-css-native.md#5-reveal-on-enter-fade--slide--clip--blur`
Staggered card reveal	`scroll-gsap.md#3-batch-reveal-on-enter`
Headline line-mask reveal	`text-effects.md#1-line-mask-reveal-splittext-mask-lines`
Kinetic hero intro timeline	`text-effects.md#27-kinetic-headline-intro-sequence` , `motion-principles.md#9-orchestrating-a-hero-intro-gsap-motion-css`
Pinned hero zoom / clip expand	`scroll-gsap.md#6-pinned-hero-zoom-and-clip-expansion`
Pinned multi-step story	`scroll-gsap.md#7-pinned-multi-step-timeline-with-label-snap`
Horizontal scroll gallery	`scroll-gsap.md#8-horizontal-scroll-gallery` , CSS: `scroll-css-native.md#10-horizontal-scroll-section-sticky--view-timeline`
Stacked cards	`scroll-gsap.md#9-stacked-cards` , CSS: `scroll-css-native.md#11-stacking-cards`
Sticky split scrollytelling	`scroll-gsap.md#10-sticky-split-layout`
Parallax	`scroll-css-native.md#6-parallax-layers` , `scroll-gsap.md#11-parallax-layers`
Words light up as you scroll	`scroll-gsap.md#5-text-fills-as-you-scroll` , `scroll-css-native.md#12-text-fill--word-by-word-highlight-on-scroll`
Scroll-velocity skew / marquee	`scroll-gsap.md#13-scroll-velocity-skew-and-marquee`
Apple image sequence / video scrub	`scroll-gsap.md#17-scroll-scrubbed-video-and-image-sequence`
Full-screen slide sections	`scroll-gsap.md#15-observer-full-screen-slides`
Reading progress, sticky header shrink	`scroll-css-native.md#4-reading-progress-bar-page-and-per-article` , `#8-sticky-header-compact--frosted-on-scroll`
Scramble / decrypt text	`text-effects.md#6-scramble--decode--decrypted-text`
Rotating words, text roll on hover	`text-effects.md#8-rotating-words-height-masked-slot` , `#9-text-roll-on-hover`
Cursor-proximity variable type	`text-effects.md#12-cursor-proximity-variable-type`
Giant fitted footer wordmark	`text-effects.md#14-fit-text-to-width-giant-wordmark-footer`
Marquee (CSS / velocity)	`text-effects.md#22-css-only-infinite-marquee` , `#23-velocity-reactive-marquee`
Number counters	`text-effects.md#24-number-animation`
Font pairing	`typography.md#9-font-pairing-playbook-2026`
Custom cursor, magnetic buttons	`interactions.md#1-custom-cursor-with-trailing-ring` , `#2-magnetic-elements`
Hover image reveal list, image trail	`interactions.md#3-hover-image-reveal-and-image-trail`
Button hover/press system	`interactions.md#4-button-hover-and-press-system`
Spotlight glow card grid	`interactions.md#7-spotlight-glow-card-grid`
Tabs sliding indicator	`interactions.md#8-tabs-indicator-and-nav-hover-highlight`
Micro kit (hold, copy, like, switch)	`interactions.md#13-micro-interaction-kit`
Route transitions in Next 16 (native)	`page-transitions.md#4-react-193-viewtransition--next-16-routes`
Shared element list -> detail	`page-transitions.md#5-shared-element-list-detail-3-ways`
Curtain / overlay route transition	`page-transitions.md#7-gsap-overlay-route-transitions-the-awwwards-default`
Theme toggle circle reveal	`page-transitions.md#10-circle-reveal-from-the-click-point-theme-toggle--routes`
Preloader + gated hero intro	`page-transitions.md#18-counter-0-100--curtain-skipped-on-repeat-visits` , `#19-intro-gate-store-hero-waits-for-preloader`
Fullscreen menu, hide-on-scroll nav	`page-transitions.md#23-fullscreen-menu-overlay` , `#24-nav-hide-on-scroll-down--show-on-up`
Dialog / popover enter-exit in CSS	`css-modern.md#1-enterexit-from-displaynone-starting-style--allow-discrete`
Mesh gradient, aurora, grain	`backgrounds-svg-canvas.md#1-layered-radial-mesh-gradient` , `#2-aurora-blobs` , `#3-grain-noise-overlay`
Border beam / rotating conic border	`backgrounds-svg-canvas.md#8-border-beam-along-the-edge` , `#7-animated-conic-border`
SVG line drawing, morphing	`backgrounds-svg-canvas.md#14-stroke-drawing` , `#15-shape-morphing`
Interactive dot grid, constellation	`backgrounds-svg-canvas.md#29-interactive-spring-dot-grid` , `#27-constellation-network`
Shader gradient background	`webgl-shaders-3d.md#1-gatekeeping-and-loading-shell-next-16` + `#3-shader-library-glsl`
WebGL image hover / gallery	`webgl-shaders-3d.md#4-image-effects-and-dom-to-webgl`
Fluid cursor, particle morph	`webgl-shaders-3d.md#5-cursor-fluid-simulation` , `#6-particles-morphing-points-mouse-repulsion-gpgpu`
3D glass hero (R3F)	`webgl-shaders-3d.md#7-r3f-hero-scene-glass-environment-gltf-scroll-camera-3d-text`
Globe	`component-recipes.md#14-globe-cobe` , `webgl-shaders-3d.md#8-globes-cobe-three-globe-custom`
Bento grid	`layout-composition.md#7-bento-grids-done-right` , `component-recipes.md#43-bento-grid`
Proven section combos	`component-recipes.md#recipe-combos`
Hero layouts	`layout-composition.md#6-hero-paradigms-10-skeletons`
Palette from one brand color	`color-surfaces.md#2-12-step-ramp-generator-ts-gamut-aware`
Dark mode, no theme flash	`color-surfaces.md#10-dark-mode-done-right` , `#11-theme-switch-without-fouc`
Glass / liquid glass	`color-surfaces.md#15-glassmorphism-done-right` , `#16-liquid-glass-approximations-tiered`
Choosing a visual direction	`aesthetic-directions.md#decision-guide---choosing-a-direction-from-a-brief`

Design Read (always first)

Direction:           <one entry from aesthetic-directions.md, or a named blend of two>
Motion personality:  <preset from motion-principles.md#21-motion-personality-presets>
Signature moment:    <the ONE effect a visitor will remember, and where it lives>
Supporting layer:    <one reveal system + hover/press/focus feedback + transitions>
Stack:               <CSS-native | Motion | GSAP+Lenis | +OGL/R3F> because <reason>

If the brief is vague ("make it premium"), infer from the product, audience and existing brand, state the read, and proceed. Ask only when two very different directions are equally plausible.

Choosing the stack

Pick the lightest tool that can express the effect:

CSS only: hover/press/focus, popover/dialog enter-exit (
```
@starting-style
```
), accordions, reveal-on-enter and progress bars (scroll-driven animations, with a fallback), marquees, gradient/conic animations (
```
@property
```
). Zero JS, off the main thread.
Motion (
motion/react
): React app UI. Layout animations,
```
layoutId
```
shared elements, presence/exit, gestures and drag, springs, reorderable lists.
GSAP + ScrollTrigger + Lenis: scroll storytelling and timelines. Pinning, scrubbed multi-step sequences, horizontal sections, SplitText, Flip, DrawSVG/MorphSVG, intro sequences.
WebGL (OGL for 2D shader effects, R3F for scenes): only when the concept needs it. Always ship a static poster fallback through the loading shell (webgl recipe 1).

Motion and GSAP can live in one project for different jobs, never on the same element. One smooth-scroll instance, one RAF loop (drive Lenis from

gsap.ticker

when GSAP is present).

Platform facts that change the code (verified 2026-09-27)

CSS scroll-driven animations: Chrome 115+, Safari 26+, Firefox only from 159 (scheduled 2026-10-27). Not Baseline: always
```
@supports (animation-timeline: view())
```
+ a fallback.
View Transitions: same-document in all engines (Firefox 144+), cross-document not in Firefox. React 19.3 stable exports
```
<ViewTransition>
```
/
```
addTransitionType
```
; Next 16.3 needs no flag.
Default GSAP
pin: true
causes CLS: measured 0.75 at pin + 1.0 at unpin per 100vh section in Chromium (scroll is not an excluding input). CSS
```
position: sticky
```
+ scrub and
```
pinType: "transform"
```
both measured 0. Prefer sticky tracks where the layout allows.
ScrollTriggers created out of page order (lazy sections, a
```
useLenis()
```
value in useGSAP
```
dependencies
```
) fire early by the pin length. Higher
```
refreshPriority
```
refreshes first, and any
```
refreshPriority
```
enables auto-sorting by page position. (The official gsap-scrolltrigger skill states this backwards; the source is authoritative.)
Chromium-only today:
```
interpolate-size
```
,
```
corner-shape
```
, CSS carousels (
```
::scroll-marker
```
),
```
scroll-state()
```
queries,
```
if()
```
,
```
@function
```
. Use them as progressive enhancement only.
API changes that break older snippets: cobe 2 has no
```
onRender
```
(drive
```
globe.update()
```
from your own rAF); drei 10
```
PresentationControls
```
takes
```
damping
```
, not
```
config
```
;
```
THREE.Clock
```
is deprecated (r183+); Next 16
```
Image
```
uses
```
preload
```
instead of
```
priority
```
; Motion's
```
AnimateView
```
imports from
```
motion/react-animate-view
```
; tsParticles v4 uses
```
ParticlesProvider
```
.
Inline
```
style={{ position: ... }}
```
on a wrapper overrides a caller's
```
absolute inset-0
```
class and collapses it to 0 px: keep positioning in classes for any component that accepts
```
className
```
.

Page choreography blueprint

Layer	Budget	Typical recipe
Arrival	hero readable in under 1.2 s	optional preloader only for a real brand moment or heavy assets, then a hero timeline: headline line-mask reveal, media scale/clip-in, nav fade last
Signature	exactly one per page	pinned scrub sequence, horizontal gallery, stacked cards, WebGL hero, or kinetic headline
Rhythm	one system for every section	same ease, distance (24-48 px), stagger (40-80 ms) for all reveals; no per-section novelty
Feedback	every interactive element	hover/press/focus at 120-250 ms; magnetic or cursor effects only on pointer:fine
Transitions	route and state changes	view transitions or a curtain matching the direction
Finale	footer	giant fitted wordmark, marquee, or a quiet sign-off; not another spectacle

One hero effect per viewport. Two competing motions cancel each other.
Motion follows the spatial model: things enter from where they logically come from and leave toward where they go. Keep direction consistent across the page.
Lead with the largest element, follow with detail. Text last when media carries the moment, text first when the headline is the moment.
Exits are faster than entrances (about 0.75x). High-frequency actions get little or no motion.
Reveal once. Re-animating content every time it re-enters the viewport is noise.
Scroll-linked motion must feel attached to the finger: scrub with slight smoothing (
```
scrub: 0.5
```
to
```
1
```
), never time-based animations that fight the scroll.
Never hijack scroll speed or direction on content pages. Pin, do not trap.

Non-negotiables

```
prefers-reduced-motion
```
: replace movement with opacity or the static end state; stop parallax, auto-play, marquees and scroll-jacking; keep all content visible (
```
performance-a11y.md#15-reduced-motion-reduce-dont-remove
```
).
Auto-moving content longer than 5 s (marquees, carousels, video backgrounds) needs a pause control or pause on hover/focus (WCAG 2.2.2).
Animate
```
transform
```
and
```
opacity
```
by default.
```
filter
```
,
```
backdrop-filter
```
,
```
clip-path
```
and
```
mask
```
are fine on small or short-lived elements; never scrub them on full-viewport surfaces.
Pointer effects (custom cursor, magnetic, tilt, hover reveals) only under
```
(hover: hover) and (pointer: fine)
```
, with a touch-friendly equivalent. Hide-until-hover states must be gated the same way (a landscape tablet is
```
lg
```
wide and cannot hover).
The LCP element is never hidden behind a long preloader. Server-render content; animate from a visible or quickly revealed state. Loaders and intro curtains are opt-in: hidden unless a head script sets
```
html[data-intro="run"]
```
, so no-JS visitors and failed bundles never see a blank screen.
Split text keeps an accessible label (
```
aria-label
```
on the parent, split pieces
```
aria-hidden
```
).
Clean up everything:
```
useGSAP
```
scope, ScrollTriggers, Lenis, RAF loops, observers, WebGL contexts. No
```
window
```
at module scope (SSR).
Tokens, not magic numbers: durations, easings, distances and staggers live in CSS custom properties or one TS constants module.
Test in both themes (if the site has two), at 375 px and 1440 px, and with CPU throttled 4x.

Verification protocol

Scripts live in this skill's

scripts/

folder and need

playwright-core

(or

playwright

) in the project plus an installed Chrome/Edge (or set

AUDIT_BROWSER

<skill-dir>

below is this skill's base directory (shown when the skill loads;

~/.claude/skills/frontend-atlas

for a manual install).

Start the dev server, then run
```
node <skill-dir>/scripts/motion-audit.mjs http://localhost:3000 --out motion-audit --widths 1440,390 --steps 16
```
. It scrolls with real wheel input (so Lenis/ScrollTrigger react), screenshots intro frames and every scroll step, and runs again with
```
prefers-reduced-motion: reduce
```
. It reports console errors, horizontal overflow with the culprit element, content that entered the viewport but was never visible (reveals that never fired), CLS with the shifting nodes, frame pacing and long animation frames. Headless numbers are for before/after comparison, not field data.
```
node <skill-dir>/scripts/contact-sheet.mjs motion-audit --match motion-1440-scroll
```
builds one image of the whole scroll: read it to check choreography, pins and crossfades.
When a scroll effect fires early or late, compare
```
ScrollTrigger.getAll().map(t => [t.trigger, t.start])
```
with each trigger's
```
getBoundingClientRect().top + scrollY
```
(creation-order bug, see facts above).
Keyboard pass: tab through menus, dialogs and transitions; focus stays visible and trapped where it should be. Then run the
```
web-design-guidelines
```
skill over the changed files.

Maintaining this skill: after editing any reference, run

node scripts/maintenance/build-index.mjs

(regenerates

references/INDEX.md

) and

node scripts/maintenance/check-links.mjs --links

from the skill folder. Re-verify changed recipes in a browser before trusting them.

Companion skills

Recommended alongside this skill (install commands in the repository README); when installed, use them as deep API references once the stack is chosen:

gsap-core

gsap-timeline

gsap-scrolltrigger

gsap-plugins

gsap-react

gsap-utils

gsap-performance

gsap-frameworks

: official GreenSock skills (

greensock/gsap-skills

). Where

gsap-scrolltrigger

describes

refreshPriority

ordering, trust the platform fact above.

vercel-react-view-transitions

: deep patterns for React

<ViewTransition>

in Next.

```
web-design-guidelines
```
: Vercel's Web Interface Guidelines as a final review pass.

vercel-react-best-practices

: React/Next performance rules (all three from

vercel-labs/agent-skills

Taste and critique:

taste-skill

redesign-skill

soft-skill

(

Leonxlnx/taste-skill

) and

impeccable

(

pbakaus/impeccable

Precedence: project rules > this skill's stack decision > a companion's default ("recommend GSAP" in the GSAP skills does not override choosing CSS or Motion when they are lighter).

Motion slop to refuse (quick list)

Fade-up on every section with identical timing, the default AI reveal. Use one crafted reveal system and let some sections simply be there.
Bounce or elastic easing on UI, scale-from-zero, spinning or wobbling decorations.
Purple-to-blue aurora + grid + beams + shimmer button + bento as a stack of defaults (
```
aesthetic-directions.md#global-ai-slop-tells-evidence-ranked
```
).
Tilt, glow and magnetic effects on everything at once.
Custom cursor on a content or product site with no reason for it.
Parallax on text blocks, parallax ratios above about 0.3 on content, horizontal scroll for plain text content.
Preloaders that exist only to show a counter.
Typewriter headlines, gradient text on every heading, glitch effects outside a clear concept.

When a request would land in this list, pick the tasteful variant from the relevant reference file and say briefly why.

frontend-atlas

NPX Install

Tags

SKILL.md Content