Components, Motion & Recipes

1 COMPONENT CHECKLIST Record every component the site uses; skip the ones it does not. actions: button (primary, secondary, tertiary, ghost, icon, pill), text link, link with chevron or arrow forms: input, textarea, select, checkbox, radio, toggle, slider, search field, date picker, file upload form behavior: label position, placeholder, helper text, required marker, when validation runs (blur, submit, live), error color, icon and message position, success state containers: card (per type: product, feature, article, stat, testimonial), tile, panel, list item, table (density, zebra, sticky header, sort icons) navigation: tabs, segmented control, breadcrumb, pagination, stepper, dropdown, mega-menu, side nav overlays: accordion, tooltip, popover, modal, drawer or sheet, lightbox feedback: toast, alert or banner, progress, spinner, skeleton, badge or chip, avatar media: carousel controls, video player controls, map, chart (colors in order, gridlines, tooltip) third party: cookie banner, chat widget, pop-ups: position, size, style; mark third party 2 STATES For button-primary, button-secondary, text link, card, input and nav link: default, hover, focus-visible, active (pressed), disabled; plus where relevant loading, selected or current, error, success, visited. Write only what changes, then the transition: "hover: bg #4032c8, shadow --shadow-2; 200ms cubic-bezier(0.25,1,0.5,1)". Write "instant" if nothing animates. Never skip focus-visible: if the site has none, write "browser default outline". Page states: loading, empty, no results, error, offline, 404. 3 INTERACTION RECORD Use for every animated interaction that is not a plain hover. All lines required; unknown -> "not measured, est ...". - id: <short name, e.g. nav.flyout> element: <what, where> trigger: hover (with intent delay ms) | click | focus | scroll | load | timer open: <what changes: property from -> to, ms, delay, easing> children: <start state (opacity, offset px and direction), end state, ms, stagger formula, e.g. 30ms x index> close: <what changes, ms, easing, children order same or reverse> switch: <what happens moving to a sibling trigger while open> keyboard: <keys, focus order, Escape> touch and mobile: <behavior> reduced motion: <replacement> Scroll-linked motion: describe as progress 0.00-1.00 of a section with keyframes ("0.10 caption 1 opacity 0 -> 1"), scroll length (e.g. 300vh), pinned yes/no, scrubbed yes/no, snap points. 4 REQUIRED NUMBERS PER COMPONENT TYPE carousel / gallery / slider: slide width (px and % of viewport), gap, radius, how much of neighbours shows, caption position and padding, navigation type (dots, pill, arrows, paddles, thumbs) with sizes, gaps, colors for inactive / hover / current, how progress is shown, play/pause control, slide change ms and easing, autoplay interval and when it stops, mobile swipe and visible neighbours. dropdown / mega-menu / flyout: panel width, padding, columns and widths, heading-to-links gap, link sizes per level and line spacing, background material, page overlay; open ms, delay, easing; items start offset and stagger; close ms and order; switching triggers; mobile menu layout and animation. card shelf / horizontal scroller: card sizes per type, gap, radius, first card alignment, edge overflow, paddle size, position, colors, scroll distance per click, mobile behavior. modal / drawer: size, position, radius, padding, overlay color and blur, open and close timing, close control, focus trap. sticky sub-nav: height, background when stuck and before, when it sticks, contents, CTA. accordion / tabs: header height, icon and its rotation, open animation ms and easing, active indicator style and motion. sticky scroll story: section scroll length, pinned element, what changes at which progress, text entry timing, mobile fallback. marquee: speed px/s, direction, gap, pause on hover. 5 SITE MOTION PROFILE (Overview MOTION) intensity: none | minimal | functional | expressive | cinematic model: css transitions | spring physics | timeline library (GSAP) | Lottie | baked video durations: actual values (typical: micro 100-150ms, small 150-250, large 300-500, page 400-800) bounce or overshoot allowed: yes/no scroll reveal: elements, trigger point (e.g. top at 80% of viewport), from state, ms, easing, stagger; or none Effect words to use: fade, rise, scale-in, clip-reveal, mask-wipe, split-text (char, word, line), counter, parallax (factor), pin, scrub, snap, marquee, magnetic, tilt, lift, underline-grow, color-shift, image-zoom, glow, morph, stagger, horizontal-scroll, stacking cards, draggable, auto-advance. 6 SCENES AND EXPERIMENTAL EFFECTS (Recipe, kind: scene) renderer: three.js | react-three-fiber | ogl | custom shader | canvas 2D | Spline | Unicorn Studio | video placement: behind content | fullscreen fixed | inline box (size) camera: perspective or orthographic, fov, position, movement (with pointer, with scroll) lights: type, color, intensity, look objects: shape, material in words (glass, matte, chrome), color, deformation, idle motion speed background: color, gradient, environment, transparent post effects: bloom, grain, chromatic aberration, vignette, depth of field, noise, pixelation, with visible strength interaction: pointer, scroll, click, drag -> visible reaction timeline: at <time or progress>: <change> mobile: static image | simplified scene | same If it cannot be structured: one exact paragraph (what is on screen, idle motion, reaction to input, colors, material, speed, mobile). cursor: shape, size, color, blend mode, follow lag, native cursor hidden, hover changes, label preloader: type (percentage, logo animation, bar, curtain), minimum time, exit animation page transition: overlay, direction, ms, shared elements, library (Barba, Swup, View Transitions) 7 HOW TO NAME TECHNIQUES Write the technique in plain words, with the library only when the look depends on it: CSS: grid, subgrid, container queries, clamp fluid type, backdrop-filter blur, mix-blend-mode, clip-path, mask, scroll-snap, position sticky, scroll-driven animations, view transitions, variable fonts, text-wrap balance, 3D transforms, gradient text, SVG noise filter JS: GSAP (+ScrollTrigger, SplitText, Flip), Motion (Framer Motion), Lottie, Rive, Lenis smooth scroll, Swiper, IntersectionObserver, Web Animations API Canvas and 3D: canvas image sequence, three.js, WebGL shader, Spline Video: autoplay loop, scroll-scrubbed video, hover play 8 WHERE TO WRITE Global components: Overview COMPONENTS. Page-only components: Page memo. Anything over about 10 lines or with a timeline: Recipe memo, with a one-line pointer in the Overview or Page.