# Frontend Design Basics

- [Start here](/docs): The docs for Frontend Design Basics: how-tos, rules and case studies, plus the tools and galleries around them.
- How-tos
  - [How-tos](/docs/how-to): Short, numbered guides for one job each. Pick the task, follow the steps, open the live version.

  - **Setup**
  - [How to start a project with the toolkit](/docs/how-to/start-a-project): Go from a brief to one working, verified experience in six steps.
  - [How to drive any component from progress 0..1](/docs/how-to/progress-driven-components): Build one component that runs on its own, or scrubs to a parent's scroll, without re-rendering every frame.

  - **3D**
  - [How to decide if you need 3D, and which tool](/docs/how-to/pick-a-3d-tool): Start from the lightest option that does the job, then set up a scene that stays smooth.
  - [How to go from pixel to HD, three ways](/docs/how-to/pixel-to-hd): Make an object, a whole scene or an image start as chunky pixels and resolve to full detail.
  - [How to draw thousands of blocks in one call](/docs/how-to/instanced-blocks): Build voxel type, cities and puzzles from one InstancedMesh, and keep them scrubbable.
  - [How to stack post-processing without jank](/docs/how-to/post-processing-stack): Add bloom, glitch, chromatic aberration and a custom CRT pass, and change them live without a single dropped frame.

  - **Shaders**
  - [How to write a shader background](/docs/how-to/shader-background): One full-screen triangle and a fragment shader that drifts like ink, stays behind the text, and freezes for reduced motion.
  - [How to render anything as ASCII or 1-bit](/docs/how-to/ascii-and-dither): Turn a 3D scene, a shader or an image into characters or black-and-white dots, and keep it fast.
  - [How to make neon light paths](/docs/how-to/neon-light-paths): Draw glowing lines that travel along a path, three ways, and pick the cheapest one that does the job.
  - [How to make colour look expensive](/docs/how-to/make-colour-look-expensive): A living gradient that never bands or goes muddy, and glass that bends it.

  - **Motion**
  - [How to pick the right ease (and when to use a spring)](/docs/how-to/pick-an-ease): Choose a curve in seconds, with a default set that covers almost every move.
  - [How to make kinetic type and motion posters](/docs/how-to/kinetic-type-and-posters): Split words into letters, fly them in 3D, flip them, and cut scenes together on one timeline.
  - [How to draw and morph SVG](/docs/how-to/draw-and-morph-svg): Draw strokes on, send things along a path, and morph one shape into another without twisting.
  - [How to animate layouts and pages with Flip](/docs/how-to/flip-layouts-and-page-transitions): Animate any layout change, from a bento reshuffle to a route change, without measuring anything by hand.

  - **Scroll and layout**
  - [How to add scroll effects without hijacking the page](/docs/how-to/scroll-without-hijacking): Pin, scrub, skew and zoom inside one section, while the rest of the page scrolls normally.
  - [How to build a hero, a bento grid and a footer](/docs/how-to/hero-bento-footer): The three sections every landing page needs, each built from type scale, one accent and space.
  - [How to own your components](/docs/how-to/own-your-components): Install components as source from registries, restyle them, and build the simple ones yourself.

  - **Images**
  - [How to show hundreds of images, and their palettes](/docs/how-to/images-at-scale): Put hundreds of screenshots in one 3D wall, print them as halftone, and pull a palette from each.
  - [How to generate AI assets for the web](/docs/how-to/ai-assets): Brief, generate, animate and ship images, loops and 3D models without breaking the rules.

  - **Verify**
  - [How to build Win95 chrome, and prove it all moves](/docs/how-to/win95-chrome-and-verify): Real bevels and pixel fonts for the retro act, then the checks that prove every piece moves, stops and fits.
- Rules
  - [The rules](/docs/rules): Twelve rules to decide once, write down and check before anything ships. Each one links to its detail page.
  - [Tokens and colour](/docs/rules/tokens-and-colour): Two tiers of tokens, one naming pattern, a palette of neutrals plus one accent, and contrast you measure.
  - [Scales and type](/docs/rules/scales-and-type): Pick type on purpose, then take every size from a short, named list: type, spacing, radius, shadow, z-index and icons.
  - [Breakpoints and layout](/docs/rules/breakpoints-and-layout): Five named breakpoints, three containers, gutters and grid columns, proximity, and the 390px rule.
  - [Components and states](/docs/rules/components-and-states): Every state an interactive element needs, the touch target sizes, and one API shape for every component.
  - [Motion tokens](/docs/rules/motion-tokens): Four durations, four curves and one reduced-motion switch. Name them once in CSS and never type a raw millisecond value in a component again.
  - [Media](/docs/rules/media): AVIF first, real sizes, a reserved box for every image and video, and alt text that says what the picture is for.
  - [Accessibility](/docs/rules/accessibility): WCAG 2.2 AA turned into rules you can check in five minutes with a keyboard, a contrast checker and the browser's accessibility tree.
  - [Copy](/docs/rules/copy): Buttons say what they do, errors say how to fix it, and one spelling, one date format and one case style run through the whole product.
  - [Structure and performance](/docs/rules/structure-and-performance): Where tokens, components and content live in a Next.js project, and the budgets that keep it fast: LCP 2.5 s, INP 200 ms, CLS 0.1.
- Case studies
  - [Case studies](/docs/cases): Great sites taken apart, from their makers' own write-ups. What they decided, how they built it, and what to take.
  - [BR95: Windows 95 in the browser](/docs/cases/br95): How brunojaamaa.dev became a believable Windows 95 desktop with real bevels, pixel fonts, a window manager, stepped motion and dithered art, while every window stays a crawlable page.
  - [Balatro deck: cloning a look from its real assets](/docs/cases/balatro-deck): A slide deck built to look, move and sound exactly like the card game Balatro, by reading the real palette, shaders and timings from the game's own files instead of eyeballing screenshots.
  - [GitHub globe: live data as a WebGL scene](/docs/cases/github-globe): How GitHub drew a globe of real pull requests from about 12,000 instanced dots, hid its own performance shortcuts inside the design, and degraded gracefully on slow devices.
  - [Stripe Connect: motion that stays fast](/docs/cases/stripe-connect): Stripe's own write-up of its Connect page, with CSS Grid stripes, CSS 3D cubes, a 5KB Web Animations demo and polyfills only for those who need them, plus how its animated mesh gradient works.
  - [Linear: redesigning a dense dark UI](/docs/cases/linear-redesign): How Linear cut visual noise, rebuilt its themes in LCH from three inputs, and shipped a full UI redesign in about six weeks, from its own write-up.
  - [Vercel Ship badge: a lanyard you can grab](/docs/cases/vercel-3d-badge): How Vercel turned a conference ticket into a 3D badge on a physics rope, in about 80 lines of React Three Fiber.
  - [Igloo Inc.: a company site carved out of ice](/docs/cases/igloo-inc): How abeto built the Awwwards Site of the Year with procedural ice, compressed volume data and a WebGL interface, all in three.js.
  - [Bruno Simon: a portfolio you drive](/docs/cases/bruno-simon-folio): Two open-source three.js portfolios where you steer a small vehicle around a world, from the 2019 cannon.js original to the 2025 WebGPU rebuild.
  - [Sonner: how a toast earns its polish](/docs/cases/emil-sonner): Emil Kowalski's own breakdown of the details behind Sonner, the React toast library, from stacking maths to swipe velocity and interruptible motion.
  - [Josh W. Comeau: whimsy, explained by its maker](/docs/cases/josh-comeau): How Josh Comeau builds the playful details on his blog, from randomised sparkles to a rainbow button powered by registered custom properties.