{"costs":{"light":"CSS or SVG only","medium":"a canvas loop or a small library","heavy":"WebGL, physics or audio"},"description":"Live specimens of web techniques, each with a prompt starter, references and the specimens it mixes well with. Pick a few and copy one brief.","families":[{"code":"MO","key":"motion","name":"Motion"},{"code":"GN","key":"generative","name":"Generative"},{"code":"PH","key":"play","name":"Physics & play"},{"code":"SP","key":"spatial","name":"Spatial & 3D"},{"code":"AE","key":"aesthetic","name":"Aesthetics"},{"code":"SN","key":"senses","name":"Senses & input"}],"fits":{"strong":"usually right in one pass","good":"may need a styling round","tune":"expect one tuning pass"},"mixing":{"aesthetic":"One look ties everything together.","content":"Real words and links, readable without any effect.","hero":"One specimen carries the page's idea.","shareExample":"https://orkide.ouzx.me/en/atlas#mix=MO-03,GN-07,AE-05","support":"One or two more add depth without competing."},"name":"Design atlas","specimens":[{"added":"2026-10","cost":"light","desc":"The page is a sequence of scenes. Scrolling scrubs each scene, so the reader sets the pace.","family":"motion","fit":"strong","id":"MO-01","name":"Scroll-driven story","pairs":["MO-03","AE-05","GN-07","SP-03"],"prompt":"Build [subject] as a scroll-driven story in 5 pinned scenes. Use CSS scroll-timeline / view-timeline, with GSAP ScrollTrigger as fallback. Each scene carries one idea and one animation scrubbed by scroll. Add a progress rail, and keep a readable static layout under prefers-reduced-motion.","refs":[{"label":"Scroll-driven demos","url":"https://scroll-driven-animations.style/"},{"label":"GSAP showcase","url":"https://gsap.com/showcase/"},{"label":"Awwwards interactive","url":"https://www.awwwards.com/inspiration_search/web-interactive/"}],"slug":"scroll-story","tags":["CSS scroll-timeline","GSAP ScrollTrigger","sticky"],"url":"https://orkide.ouzx.me/en/atlas#scroll-story"},{"added":"2026-10","cost":"light","desc":"Elements glide between layouts instead of jumping when you filter, sort or open something.","family":"motion","fit":"strong","id":"MO-02","name":"Morphing layouts","pairs":["MO-05","AE-05","AE-04","SP-01"],"prompt":"Build [subject] so every state change morphs: filtering a grid, opening a card into a detail view, switching pages. Use the View Transitions API with a view-transition-name per item and a FLIP fallback. Keep each transition under 400ms.","refs":[{"label":"MDN: View Transitions","url":"https://developer.mozilla.org/en-US/docs/Web/API/View_Transition_API"},{"label":"Chrome docs","url":"https://developer.chrome.com/docs/web-platform/view-transitions/"}],"slug":"morphing-layouts","tags":["View Transitions API","FLIP"],"url":"https://orkide.ouzx.me/en/atlas#morphing-layouts"},{"added":"2026-10","cost":"light","desc":"Type is the visual. Variable font axes stretch, gain weight and wave with time, scroll or cursor.","family":"motion","fit":"strong","id":"MO-03","name":"Kinetic typography","pairs":["MO-01","AE-01","AE-05","SN-03"],"prompt":"Make the hero of [subject] pure kinetic type: a variable font with width and weight axes, each letter reacting to cursor distance and scroll velocity. No images. Split letters into spans, animate font-variation-settings, and keep the text selectable and readable at rest.","refs":[{"label":"v-fonts.com","url":"https://v-fonts.com/"},{"label":"CodePen: kinetic type","url":"https://codepen.io/search/pens?q=kinetic%20typography"}],"slug":"kinetic-type","tags":["variable fonts","font-variation-settings"],"url":"https://orkide.ouzx.me/en/atlas#kinetic-type"},{"added":"2026-10","cost":"light","desc":"A small mascot with squash, stretch and blinks gives the page a personality.","family":"motion","fit":"good","id":"MO-04","name":"Character animation","pairs":["MO-05","PH-02","AE-02","AE-03"],"prompt":"Design an original SVG mascot for [subject] and animate it: squash-and-stretch idle bounce, random blinks, and a reaction when the user hovers the main button. Pure SVG plus CSS/WAAPI, no external assets.","refs":[{"label":"Rive community","url":"https://rive.app/community/"},{"label":"LottieFiles","url":"https://lottiefiles.com/"}],"slug":"character","tags":["SVG","CSS keyframes","Rive / Lottie"],"url":"https://orkide.ouzx.me/en/atlas#character"},{"added":"2026-10","cost":"light","desc":"Toggles, likes and buttons that answer every click with a tiny, specific motion.","family":"motion","fit":"strong","id":"MO-05","name":"Micro-interactions","pairs":["MO-02","MO-04","AE-01","SN-01"],"prompt":"Give every control in [subject] a micro-interaction: button press depth, submit morphing into a checkmark, toggle with spring overshoot, like-burst. Use CSS + WAAPI with spring-like easing via linear(), each under 300ms.","refs":[{"label":"Codrops","url":"https://tympanus.net/codrops/"},{"label":"CodePen: micro-interactions","url":"https://codepen.io/search/pens?q=micro%20interaction"}],"slug":"micro-interactions","tags":["WAAPI","spring easing","CSS transitions"],"url":"https://orkide.ouzx.me/en/atlas#micro-interactions"},{"added":"2026-10","cost":"heavy","desc":"A GPU fragment shader paints a living, domain-warped noise field. The cursor steers it.","family":"generative","fit":"tune","id":"GN-01","name":"Shader art","pairs":["AE-04","MO-03","SN-03","SP-04"],"prompt":"Create a full-bleed WebGL fragment shader background for [subject]: domain-warped fbm noise in [palette], drifting slowly and reacting to cursor position. Cap DPR at 1.5, pause offscreen, and show a static gradient when WebGL is unavailable.","refs":[{"label":"Shadertoy","url":"https://www.shadertoy.com/"},{"label":"The Book of Shaders","url":"https://thebookofshaders.com/"}],"slug":"shader-art","tags":["GLSL","WebGL","fbm noise"],"url":"https://orkide.ouzx.me/en/atlas#shader-art"},{"added":"2026-10","cost":"heavy","desc":"Ripples bend the surface under the cursor, like a finger dragged through water.","family":"generative","fit":"tune","id":"GN-02","name":"Liquid distortion","pairs":["MO-03","AE-02","GN-01","SN-03"],"prompt":"Add a liquid hover distortion to the hero of [subject]: a WebGL plane that ripples outward from the cursor and settles back, with the hero typography or pattern as its texture. Include a non-WebGL fallback.","refs":[{"label":"Codrops demos","url":"https://tympanus.net/codrops/demos/"},{"label":"Shadertoy: ripple","url":"https://www.shadertoy.com/results?query=ripple"}],"slug":"liquid-distortion","tags":["WebGL","displacement","ripples"],"url":"https://orkide.ouzx.me/en/atlas#liquid-distortion"},{"added":"2026-10","cost":"medium","desc":"Simple rules grow complex patterns. Hover to plant new cells.","family":"generative","fit":"strong","id":"GN-03","name":"Cellular automata","pairs":["AE-06","GN-05","PH-03","SN-01"],"prompt":"Use a cellular automaton as the living background of [subject]: Conway’s Life or reaction-diffusion on a coarse grid, fading trails, reseeding when it stagnates, and the cursor planting cells. Canvas 2D, ~10 simulation steps per second, 60fps drawing.","refs":[{"label":"LifeWiki","url":"https://conwaylife.com/"},{"label":"Reaction-diffusion tutorial","url":"https://www.karlsims.com/rd.html"}],"slug":"cellular-automata","tags":["Canvas 2D","Game of Life","reaction-diffusion"],"url":"https://orkide.ouzx.me/en/atlas#cellular-automata"},{"added":"2026-10","cost":"medium","desc":"Hundreds of particles trace an invisible current that bends toward the cursor.","family":"generative","fit":"strong","id":"GN-04","name":"Flow fields","pairs":["AE-04","MO-01","SN-01","PH-04"],"prompt":"Draw a flow-field particle system behind [subject]: 500–1500 particles following a time-varying noise field, leaving fading trails in [palette], gently attracted to the cursor. Canvas 2D, paused when offscreen.","refs":[{"label":"Tyler Hobbs: flow fields","url":"https://tylerxhobbs.com/essays/2020/flow-fields"},{"label":"Generative Artistry","url":"https://generativeartistry.com/"}],"slug":"flow-fields","tags":["Canvas 2D","noise","particles"],"url":"https://orkide.ouzx.me/en/atlas#flow-fields"},{"added":"2026-10","cost":"medium","desc":"Everything is drawn with characters. A plasma field turns into living text.","family":"generative","fit":"strong","id":"GN-05","name":"ASCII rendering","pairs":["AE-06","GN-03","MO-03","SN-03"],"prompt":"Render the hero of [subject] in ASCII: a monospace character grid where a plasma/noise field maps to a density ramp, the cursor sends a ripple, and the headline is carved out of the field. Draw with Canvas fillText one row at a time.","refs":[{"label":"play.core","url":"https://play.ertdfgcvb.xyz/"},{"label":"CodePen: ASCII","url":"https://codepen.io/search/pens?q=ascii%20animation"}],"slug":"ascii","tags":["Canvas text","monospace","density ramp"],"url":"https://orkide.ouzx.me/en/atlas#ascii"},{"added":"2026-10","cost":"light","desc":"The logo is an algorithm. Tiles rotate and recolor, so every visitor sees a different variant.","family":"generative","fit":"strong","id":"GN-06","name":"Generative identity","pairs":["AE-05","MO-02","SP-04","AE-01"],"prompt":"Design a generative identity for [subject]: a 4×4 Truchet-tile mark from a seeded RNG in two brand colors that slowly mutates. Map seed to variant so stickers and social images can reuse an exact variant, and export it as SVG.","refs":[{"label":"Truchet tiles","url":"https://en.wikipedia.org/wiki/Truchet_tiles"},{"label":"Generative Artistry","url":"https://generativeartistry.com/"}],"slug":"generative-identity","tags":["Truchet tiles","seeded random","SVG"],"url":"https://orkide.ouzx.me/en/atlas#generative-identity"},{"added":"2026-10","cost":"medium","desc":"1-bit ordered dithering turns smooth light into a crunchy, printed texture.","family":"generative","fit":"strong","id":"GN-07","name":"Dithering","pairs":["AE-06","MO-01","SP-03","AE-05"],"prompt":"Give [subject] a 1-bit dithered look: render a lit sphere (or the hero image) at low resolution, apply a 4×4 Bayer ordered dither in two ink colors, and upscale with nearest-neighbor. The light follows the cursor.","refs":[{"label":"Ditherpunk (Surma)","url":"https://surma.dev/things/ditherpunk/"},{"label":"CodePen: dithering","url":"https://codepen.io/search/pens?q=dithering"}],"slug":"dithering","tags":["Bayer matrix","ImageData","pixel art"],"url":"https://orkide.ouzx.me/en/atlas#dithering"},{"added":"2026-10","cost":"heavy","desc":"Navigation items are real objects. Throw them around and they bounce. Double-click to drop them again.","family":"play","fit":"good","id":"PH-01","name":"Physics UI","pairs":["AE-01","MO-05","SN-01","PH-02"],"prompt":"Turn the navigation of [subject] into physics objects: labeled circles that drop into a box, collide, and can be thrown with mouse or touch, using Matter.js. Clicking a body still navigates. Provide a normal link list for keyboard users and reduced motion.","refs":[{"label":"Matter.js demos","url":"https://brm.io/matter-js/"},{"label":"Rapier","url":"https://rapier.rs/"}],"slug":"physics-ui","tags":["Matter.js","Rapier","collisions"],"url":"https://orkide.ouzx.me/en/atlas#physics-ui"},{"added":"2026-10","cost":"medium","desc":"The page hides a tiny game. Catch the stars to raise your score.","family":"play","fit":"good","id":"PH-02","name":"Gamified page","pairs":["MO-04","PH-01","AE-02","SN-01"],"prompt":"Hide a mini-game in [subject]: collectible items drift up, clicking pops them with particles, and the score unlocks something real (a discount code, a hidden section). Canvas game loop, works on touch, never blocks the main content.","refs":[{"label":"Bruno Simon","url":"https://bruno-simon.com/"},{"label":"neal.fun","url":"https://neal.fun/"}],"slug":"gamified","tags":["Canvas","game loop","particles"],"url":"https://orkide.ouzx.me/en/atlas#gamified"},{"added":"2026-10","cost":"medium","desc":"A concept you poke instead of read. Change the stiffness and watch the spring answer live.","family":"play","fit":"strong","id":"PH-03","name":"Playable explainer","pairs":["MO-01","AE-05","GN-03","SP-01"],"prompt":"Explain [concept] as a playable explainer: a live simulation with 2–3 sliders, a plot that updates in real time, and short text beside each step, in the spirit of Bartosz Ciechanowski and Nicky Case. Every number on screen is computed, never faked.","refs":[{"label":"Bartosz Ciechanowski","url":"https://ciechanow.ski/"},{"label":"Nicky Case","url":"https://ncase.me/"},{"label":"Explorable Explanations","url":"https://explorabl.es/"}],"slug":"playable-explainer","tags":["simulation","sliders","live plot"],"url":"https://orkide.ouzx.me/en/atlas#playable-explainer"},{"added":"2026-10","cost":"medium","desc":"A verlet rope hangs from the cursor and swings with momentum.","family":"play","fit":"strong","id":"PH-04","name":"Elastic cursor","pairs":["AE-01","GN-04","MO-03","AE-02"],"prompt":"Attach an elastic verlet rope to the cursor in [subject]: 20–30 segments with gravity and damping, a tapered stroke in [palette]. Hide it on touch devices and under reduced motion.","refs":[{"label":"Hakim El Hattab lab","url":"https://lab.hakim.se/"},{"label":"CodePen: verlet rope","url":"https://codepen.io/search/pens?q=verlet%20rope"}],"slug":"elastic-cursor","tags":["verlet integration","Canvas"],"url":"https://orkide.ouzx.me/en/atlas#elastic-cursor"},{"added":"2026-10","cost":"medium","desc":"No pages, just a board you pan around. Content lives in space, connected by lines.","family":"spatial","fit":"strong","id":"SP-01","name":"Infinite canvas","pairs":["MO-02","PH-03","AE-05","SP-02"],"prompt":"Lay out [subject] as an infinite canvas: content cards placed in 2D space and joined by curved lines, drag to pan with inertia, wheel or pinch to zoom, a minimap, and a “back to center” button. Keep a linear list for screen readers.","refs":[{"label":"tldraw","url":"https://www.tldraw.com/"},{"label":"Awwwards interactive","url":"https://www.awwwards.com/inspiration_search/web-interactive/"}],"slug":"infinite-canvas","tags":["pan & zoom","inertia","Canvas"],"url":"https://orkide.ouzx.me/en/atlas#infinite-canvas"},{"added":"2026-10","cost":"light","desc":"The site is a fake operating system. Sections open as windows you can drag around.","family":"spatial","fit":"strong","id":"SP-02","name":"Desktop OS metaphor","pairs":["AE-06","MO-04","PH-02","SN-01"],"prompt":"Build [subject] as a fake desktop OS: icons on a desktop, sections opening as draggable, focusable windows with title bars, and a taskbar with a live clock. Use an original retro style without real OS branding. On phones, windows become full-screen sheets.","refs":[{"label":"Poolsuite","url":"https://poolsuite.net/"},{"label":"Windows 93","url":"https://www.windows93.net/"}],"slug":"desktop-os","tags":["draggable windows","retro UI","z-order"],"url":"https://orkide.ouzx.me/en/atlas#desktop-os"},{"added":"2026-10","cost":"heavy","desc":"Geometry built from math, spinning over a synthwave floor. The cursor steers the camera.","family":"spatial","fit":"good","id":"SP-03","name":"Procedural 3D","pairs":["GN-07","MO-01","AE-06","SN-02"],"prompt":"Create a procedural 3D hero for [subject] with Three.js: an object generated from code (no model files), lit and slowly rotating, camera steered by the cursor, light post-processing. Pause offscreen, cap DPR, static poster fallback.","refs":[{"label":"three.js examples","url":"https://threejs.org/examples/"},{"label":"WebGPU samples","url":"https://webgpu.github.io/webgpu-samples/"}],"slug":"procedural-3d","tags":["Three.js","WebGPU","procedural meshes"],"url":"https://orkide.ouzx.me/en/atlas#procedural-3d"},{"added":"2026-10","cost":"light","desc":"Cards lean toward the cursor and catch a glare that slides across them.","family":"spatial","fit":"strong","id":"SP-04","name":"Tilt & holo cards","pairs":["AE-02","GN-06","SN-02","MO-05"],"prompt":"Make the cards of [subject] tilt in 3D toward the cursor with a holographic glare that follows the pointer. CSS perspective and transforms driven by pointer position, smoothed with lerp, flat on touch and reduced motion.","refs":[{"label":"MDN: perspective","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/perspective"},{"label":"CodePen: holo cards","url":"https://codepen.io/search/pens?q=holographic%20card"}],"slug":"tilt-cards","tags":["CSS 3D transforms","perspective"],"url":"https://orkide.ouzx.me/en/atlas#tilt-cards"},{"added":"2026-10","cost":"light","desc":"Thick borders, hard shadows, loud color, zero polish, all on purpose.","family":"aesthetic","fit":"strong","id":"AE-01","name":"Neo-brutalism","pairs":["MO-03","PH-01","MO-05","PH-04"],"prompt":"Design [subject] in neo-brutalist style: one loud background color, 3px black borders, hard offset shadows, oversized system type, a ticker marquee, and buttons that physically press in. Keep contrast at WCAG AA.","refs":[{"label":"Brutalist Websites","url":"https://brutalistwebsites.com/"},{"label":"Figma: 2026 trends","url":"https://www.figma.com/resource-library/web-design-trends/"}],"slug":"neo-brutalism","tags":["hard shadows","marquee","system fonts"],"url":"https://orkide.ouzx.me/en/atlas#neo-brutalism"},{"added":"2026-10","cost":"light","desc":"Liquid chrome type, sparkles and candy gradients, straight out of 2001.","family":"aesthetic","fit":"strong","id":"AE-02","name":"Y2K chrome","pairs":["SP-04","GN-02","MO-04","PH-02"],"prompt":"Style [subject] with Y2K energy: an animated liquid-chrome headline (gradient + background-clip), candy-colored blurred blobs, sparkle glyphs and rounded pill UI. Fun but legible, no stock clipart.","refs":[{"label":"Figma: 2026 trends","url":"https://www.figma.com/resource-library/web-design-trends/"},{"label":"CodePen: chrome text","url":"https://codepen.io/search/pens?q=chrome%20text"}],"slug":"y2k-chrome","tags":["background-clip text","gradients","blur blobs"],"url":"https://orkide.ouzx.me/en/atlas#y2k-chrome"},{"added":"2026-10","cost":"light","desc":"Torn paper, tape, halftone dots and grain. It looks handmade even though it is code.","family":"aesthetic","fit":"good","id":"AE-03","name":"Collage & texture","pairs":["MO-04","MO-03","SP-01","GN-06"],"prompt":"Give [subject] a collage look: torn-paper shapes, tape strips, halftone dots and film grain made with SVG filters and patterns, plus slightly rotated cut-out letters for headlines. All procedural, no scanned assets.","refs":[{"label":"2026 trends: textures","url":"https://wannathis.one/blog/web-design-trends-2026"},{"label":"Figma: collage trend","url":"https://www.figma.com/resource-library/web-design-trends/"}],"slug":"collage","tags":["SVG filters","feTurbulence","halftone"],"url":"https://orkide.ouzx.me/en/atlas#collage"},{"added":"2026-10","cost":"medium","desc":"Frosted panels float over moving color, with bright edges like real glass.","family":"aesthetic","fit":"good","id":"AE-04","name":"Liquid glass","pairs":["GN-01","GN-04","MO-02","SN-03"],"prompt":"Build the UI of [subject] as liquid glass: translucent panels with backdrop-filter blur and saturation over slowly moving color blobs, bright 1px edge highlights, and readable text contrast at every position. Check it on a low-end GPU.","refs":[{"label":"MDN: backdrop-filter","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter"},{"label":"CodePen: liquid glass","url":"https://codepen.io/search/pens?q=liquid%20glass"}],"slug":"liquid-glass","tags":["backdrop-filter","layered blur"],"url":"https://orkide.ouzx.me/en/atlas#liquid-glass"},{"added":"2026-10","cost":"light","desc":"Strict grid, giant numerals, one red block. Order is the aesthetic.","family":"aesthetic","fit":"strong","id":"AE-05","name":"Swiss editorial","pairs":["MO-01","MO-03","GN-06","PH-03"],"prompt":"Design [subject] in modern Swiss style: a strict 12-column grid, huge numerals and flush-left type, one red accent block that wipes in on scroll, generous white space, no decoration.","refs":[{"label":"Fonts In Use","url":"https://fontsinuse.com/"},{"label":"Typographica","url":"https://typographica.org/"}],"slug":"swiss-editorial","tags":["CSS grid","display type","asymmetry"],"url":"https://orkide.ouzx.me/en/atlas#swiss-editorial"},{"added":"2026-10","cost":"light","desc":"Glowing phosphor text types itself out behind scanlines.","family":"aesthetic","fit":"strong","id":"AE-06","name":"Terminal / CRT","pairs":["GN-05","GN-03","SP-02","GN-07"],"prompt":"Make [subject] feel like a CRT terminal: phosphor-green monospace text that types itself, scanlines, slight flicker and curvature, and real commands the visitor can type (help, posts, contact). Turn the flicker off under reduced motion.","refs":[{"label":"CodePen: CRT terminal","url":"https://codepen.io/search/pens?q=crt%20terminal"},{"label":"Awwwards interactive","url":"https://www.awwwards.com/inspiration_search/web-interactive/"}],"slug":"terminal-crt","tags":["monospace","glow","scanlines"],"url":"https://orkide.ouzx.me/en/atlas#terminal-crt"},{"added":"2026-10","cost":"heavy","desc":"Tap a column to play a note. The visuals respond to what you hear.","family":"senses","fit":"good","id":"SN-01","name":"Sound-reactive","pairs":["PH-01","GN-04","MO-05","SP-02"],"prompt":"Add a sound layer to [subject]: tapping regions plays notes from a pentatonic scale via Tone.js or Web Audio, and visuals pulse with each note. Sound stays off until the visitor turns it on, with a visible mute toggle.","refs":[{"label":"Patatap","url":"https://patatap.com/"},{"label":"Tone.js","url":"https://tonejs.github.io/"}],"slug":"sound-reactive","tags":["Web Audio","Tone.js","audio-reactive"],"url":"https://orkide.ouzx.me/en/atlas#sound-reactive"},{"added":"2026-10","cost":"medium","desc":"On a phone you tilt to roll the marble. Here the cursor stands in for the gyroscope.","family":"senses","fit":"tune","id":"SN-02","name":"Device tilt","pairs":["SP-04","SP-03","PH-02","GN-07"],"prompt":"Make [subject] respond to phone tilt: DeviceOrientation drives a parallax scene or a rolling marble, with an explicit “Enable motion” button for the iOS permission and pointer control as the desktop fallback. Test on a real device.","refs":[{"label":"MDN: device orientation","url":"https://developer.mozilla.org/en-US/docs/Web/API/Device_orientation_events"}],"slug":"device-tilt","tags":["DeviceOrientation","mobile","permissions"],"url":"https://orkide.ouzx.me/en/atlas#device-tilt"},{"added":"2026-10","cost":"light","desc":"The cursor is a flashlight. A second layer appears only where you point.","family":"senses","fit":"strong","id":"SN-03","name":"Cursor spotlight","pairs":["GN-01","MO-03","AE-04","GN-05"],"prompt":"Hide a second layer in the hero of [subject] that only shows through a soft circular mask at the cursor (CSS mask-image driven by --x/--y variables). On touch, the spotlight follows the finger. Never put essential information only in the hidden layer.","refs":[{"label":"Hakim El Hattab lab","url":"https://lab.hakim.se/"},{"label":"CodePen: spotlight","url":"https://codepen.io/search/pens?q=spotlight%20cursor"}],"slug":"cursor-spotlight","tags":["CSS mask","radial-gradient","pointer vars"],"url":"https://orkide.ouzx.me/en/atlas#cursor-spotlight"}],"updated":"2026-10","url":"https://orkide.ouzx.me/en/atlas"}