Tasarım atlası

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.