--- title: "Components, Motion & Recipes" url: https://memocore.ai/memos/6ab4a2c2af51aac421da877d project: "Brand Styles" tags: "design-system" updated_at: "2026-09-25T05:42:33.220Z" --- # 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: element: trigger: hover (with intent delay ms) | click | focus | scroll | load | timer open: to, ms, delay, easing> children: close: switch: keyboard: touch and mobile: reduced motion: 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