# Flow

> UX laws and UI design styles, written as rules a designer or an AI agent can follow.
> MCP server: https://flow.donta.io/api/mcp (start with design_brief; also get_law, get_style, get_effect, audit_design and list_*)

# UX laws

## Hick's law

The time it takes to make a decision grows with the number and complexity of the choices.

Why it matters: Every extra option in a menu or a row of buttons slows people down and raises the chance they pick nothing at all.

Rules:
- Keep top-level navigation to 7 items or fewer; move the rest under a clearly named "More" or into a secondary menu.
- Give each screen one primary action. Secondary actions are visually quieter.
- Break long choices into steps (progressive disclosure) rather than showing everything at once.
- Recommend or preselect a sensible default when you can.
- Never trade clarity for brevity: hiding options people need is worse than showing them.

Matters most for: navigation, landing, pricing, onboarding, settings, modal, login
Source: https://lawsofux.com/hicks-law/

## Occam's razor

Among solutions that work equally well, pick the one with the fewest assumptions and parts.

Why it matters: Every element on a screen has to be read, understood and ignored if it isn't needed. Fewer parts means less to get wrong.

Rules:
- Remove any element that doesn't help the person finish their task; if removing it changes nothing, leave it out.
- Prefer one clear control over several overlapping ones.
- Don't add settings for decisions the product can make well on its own.
- Default to the simplest layout that holds the content; add structure only when content demands it.

Matters most for: settings, landing, dashboard, modal, form
Source: https://lawsofux.com/occams-razor/

## Pareto principle (The 80/20 rule)

Roughly 80% of the effects come from 20% of the causes: most people use a small share of the features most of the time.

Why it matters: If every feature gets equal space, the few that matter are buried under the many that don't.

Rules:
- Find the 20% of actions people use most (analytics, interviews) and give them the most prominent places.
- Put the remaining actions behind an overflow menu, a secondary tab or a search.
- Spend design and testing time on the high-traffic paths first.

Matters most for: dashboard, navigation, settings, mobile, list
Source: https://lawsofux.com/pareto-principle/

## Tesler's law (Conservation of complexity)

Every system has some complexity that can't be removed. The only question is whether the product handles it or the person does.

Why it matters: Simplifying the interface by pushing work onto people isn't simplifying. Good products absorb the complexity themselves.

Rules:
- Infer what you can: derive city and state from a ZIP code, card type from the card number, time zone from the browser.
- Use smart defaults and remember previous answers.
- Use autocomplete attributes on every form field so browsers can fill them.
- Don't hide necessary complexity so far that experts can't reach it.

Matters most for: form, checkout, onboarding, settings, login
Source: https://lawsofux.com/teslers-law/

## Fitts's law (Includes "minimize target distance")

The time to reach a target depends on how far away it is and how big it is. Bigger and closer is faster.

Why it matters: Small, distant buttons cause misses and slow people down, especially on touch screens and for anyone with limited dexterity.

Rules:
- Make touch targets at least 44×44 px (Apple) or 48×48 dp (Material); never below 24×24 px (WCAG 2.2 AA).
- Place primary actions close to where attention already is: next to the field just completed, at the bottom of a form, in the thumb zone on mobile.
- Leave at least 8 px between adjacent targets so they aren't mis-tapped.
- Make the whole row or card clickable when it leads to one place, not just the text.
- Keep destructive actions small and apart from the primary action.

Matters most for: mobile, form, checkout, navigation, modal, list, login
Source: https://lawsofux.com/fittss-law/

## Doherty threshold

People stay engaged when the system answers in under 400 milliseconds; beyond that, attention drifts.

Why it matters: A slow or silent response feels broken even when it works. Instant feedback keeps people in flow and confident the tap registered.

Rules:
- Acknowledge every action within 100 ms: pressed state, spinner, or the optimistic result.
- Update the UI optimistically for actions that almost always succeed (likes, toggles, reordering), and roll back on error.
- Show skeletons in the shape of the content for loads over 400 ms, and progress for anything over a few seconds.
- Disable a submit button while its request runs, and label the busy state ("Saving…").

Matters most for: form, dashboard, list, search, checkout, settings, login
Source: https://lawsofux.com/doherty-threshold/

## Parkinson's law

Any task expands to fill the time available for it.

Why it matters: Long forms and open-ended steps invite people to stall, second-guess and abandon. Short, bounded tasks get finished.

Rules:
- Ask only for what you need now; collect the rest later.
- Let the browser autofill (autoComplete attributes, correct input types).
- Tell people how long a task takes ("About 1 minute") so they can commit.
- Prefer one-tap choices over free-text fields where the answers are predictable.

Matters most for: form, checkout, onboarding
Source: https://lawsofux.com/parkinsons-law/

## Miller's law

People can hold about seven (plus or minus two) items in working memory at once.

Why it matters: The lesson isn't "limit everything to seven". It's that information must be chunked into small, meaningful groups people can scan.

Rules:
- Chunk long strings: card numbers in fours, phone numbers by area code, codes in groups.
- Group long lists and settings under headings of roughly 3 to 7 items each.
- Split long forms into labelled sections or steps.
- Don't use the number seven to justify cutting things people need.

Matters most for: form, settings, list, checkout, content
Source: https://lawsofux.com/millers-law/

## Serial position effect

People best remember the first and last items in a series.

Why it matters: The middle of a list or a tab bar is where things get forgotten, so position is a tool for importance.

Rules:
- Put the most important navigation items at the start and end; the middle is for the less important ones.
- On mobile tab bars, put home first and the account or most-used action last.
- Lead content with the key message and close with the call to action.

Matters most for: navigation, mobile, landing, list, content
Source: https://lawsofux.com/serial-position-effect/

## Zeigarnik effect

People remember unfinished or interrupted tasks better than finished ones.

Why it matters: Showing what's left to do pulls people back to finish, as long as the remaining work looks small and achievable.

Rules:
- Show progress on multi-step tasks ("Step 2 of 4" or a checklist with ticks).
- Save partial progress automatically and offer to resume.
- Start progress above zero when the person has already done something (signing up counts).
- Never fake progress or guilt people into finishing.

Matters most for: onboarding, form, checkout
Source: https://lawsofux.com/zeigarnik-effect/

## Peak-end rule

People judge an experience mostly by how they felt at its most intense moment and at its end, not by the average.

Why it matters: A flow that ends flat or in an error is remembered as a bad experience, however smooth the middle was.

Rules:
- Design the success state as carefully as the main flow: confirm what happened and say what's next.
- Find the emotional peak (first result, first sale, first share) and make it feel rewarding.
- Make errors recoverable and calm; the worst moment is also a peak.
- End with a clear next step, not a dead end.

Matters most for: checkout, onboarding, form, modal, login
Source: https://lawsofux.com/peak-end-rule/

## Law of proximity

Things that are close together are seen as belonging together.

Why it matters: Spacing is the cheapest grouping tool there is. Equal spacing everywhere makes people guess which label belongs to which field.

Rules:
- Space inside a group must be clearly smaller than space between groups (at least 2×).
- Put labels close to their own field, not halfway to the next one.
- Separate unrelated sections with whitespace before reaching for lines or boxes.
- Use a spacing scale (4, 8, 12, 16, 24, 32, 48) and stick to it.

Matters most for: form, settings, dashboard, landing, content, list
Source: https://lawsofux.com/law-of-proximity/

## Law of similarity

Things that look alike are seen as related, even when they're apart.

Why it matters: If two things look the same, people expect them to do the same thing. Inconsistent styling breaks that promise.

Rules:
- Give elements with the same function the same style everywhere.
- Make links look different from body text (color plus underline, not color alone).
- Don't style non-interactive elements like buttons or links.
- Use one button style per level of importance across the product.

Matters most for: content, navigation, dashboard, list, landing
Source: https://lawsofux.com/law-of-similarity/

## Law of uniform connectedness

Things that are visually connected (by a line, a shared background or a frame) are seen as more related than things that aren't.

Why it matters: Connection beats proximity and similarity. A line or shared surface tells people these steps or items are one thing.

Rules:
- Connect sequential steps with a line or track.
- Put related controls on a shared surface; use it sparingly so it still means something.
- Group a label, value and action in one container when they act as a unit.

Matters most for: onboarding, checkout, dashboard, settings
Source: https://lawsofux.com/law-of-uniform-connectedness/

## Law of Prägnanz (Law of simplicity)

People read complex or ambiguous images as the simplest form they can.

Why it matters: The eye works hard to simplify. Give it simple shapes to begin with and icons, logos and layouts are recognised faster.

Rules:
- Draw icons from simple geometric shapes with consistent stroke weights.
- Avoid decoration that fights the silhouette: stacked gradients, heavy shadows, outlines on outlines.
- Prefer clear, regular layouts over intricate ones.

Matters most for: landing, navigation, mobile, content
Source: https://lawsofux.com/law-of-pragnanz/

## Von Restorff effect (The isolation effect)

When several similar things are shown together, the one that differs is the one remembered.

Why it matters: Emphasis only works when it's rare. Highlight everything and nothing stands out.

Rules:
- Use the accent color for one element per view: the primary action or the recommended option.
- Never rely on color alone to make something stand out; add size, weight, position or a label.
- Keep motion for the one thing that needs attention, and respect reduced motion.

Matters most for: pricing, landing, form, checkout, dashboard
Source: https://lawsofux.com/von-restorff-effect/

## Jakob's law

People spend most of their time on other products, so they expect yours to work the same way.

Why it matters: Familiar patterns are free usability. Novelty in the wrong place makes people relearn basics before they can do anything.

Rules:
- Put the logo top-left and make it go home; search, cart and account go top-right.
- Use standard icons for standard meanings (magnifier for search, gear for settings, × to close).
- Use real links for navigation and real buttons for actions, so the keyboard, back button and new-tab work.
- Change a familiar pattern only when testing shows the new one is clearly better.

Matters most for: navigation, landing, checkout, form, mobile, search, login
Source: https://lawsofux.com/jakobs-law/

## Postel's law (The robustness principle)

Be liberal in what you accept, and conservative in what you send.

Why it matters: People type phone numbers, dates and names in many formats. Rejecting reasonable input is the interface's failure, not theirs.

Rules:
- Accept any reasonable format (spaces, dashes, brackets, country codes) and normalise it yourself.
- Trim whitespace and ignore case where case doesn't matter (emails, codes).
- Validate on blur or submit, not on every keystroke, and explain exactly what to change.
- Show the normalised result back to the person in one consistent format.
- Use the right input type and inputMode so the correct keyboard appears.

Matters most for: form, checkout, onboarding, search, login
Source: https://lawsofux.com/postels-law/

# UI styles

## Tide

Flow's own look: a cool foam-grey page, deep teal-black ink, one ultramarine accent, and a characterful grotesque for headings.

Rules:
- Accent color only for links, focus and the one primary action per view.
- Headings in Bricolage Grotesque with negative tracking; body in Public Sans at 17px / 1.6.
- Panels are white on the foam page with a 1px line border, no drop shadows.
- Red-orange and green are reserved for breaks/follows states, never decoration.

## Builder

Donta's direction C: a calm light-grey stage, white cards, near-black ink and one coral action, with Space Grotesk for everything readable and JetBrains Mono for metadata.

Rules:
- Space Grotesk for UI, headings and body; headings weight 600 with -0.02em letter-spacing.
- JetBrains Mono only for metadata and labels, written lowercase snake_case (chats_7d, claude-code, main, 2h).
- Coral #E8674A is reserved for the one primary action on a screen (e.g. Continue).
- Cards 14px radius, rows and stat tiles 10px, buttons 8px: squarer than pills.
- White cards with a 1px #E1E4E8 border on the #F4F5F7 stage; no heavy shadows.

# Effects (animation styles)

## Liquid morph (CSS, light)

A soft gradient blob that slowly wobbles and reshapes like a drop of liquid.

How it works: Animate an element's eight-value border-radius between several organic shapes while slowly rotating it, with a two-color gradient fill and a light blur for softness.

Use for: Hero accents behind a headline; AI or voice 'thinking' states; Empty states
Avoid: Behind body text; Dense dashboards

Prompt:
Build a liquid morph blob: a violet-to-blue gradient shape whose outline keeps reshaping organically. Animate an 8-value border-radius through 4 keyframes over ~8s with ease-in-out, rotate slowly, and add a subtle inner highlight. Make it responsive, cap devicePixelRatio at 2, pause when off-screen, and show a still frame when prefers-reduced-motion is set. No external libraries.

Guardrails:
- Keep the cycle slow (6s or more); fast morphing reads as nervous.
- Respect prefers-reduced-motion: show a still frame instead of the animation.
- Pause when off-screen or when the tab is hidden (IntersectionObserver + visibilitychange).
- Keep text off busy animated areas, or give it a solid backing that passes WCAG contrast.
- One showpiece effect per page. If everything moves, nothing stands out.

## ASCII art (Canvas 2D, medium)

A rotating 3D shape drawn entirely with text characters, brighter characters for lit surfaces.

How it works: Compute a lit 3D shape (a torus or sphere) per character cell, map brightness to a ramp like ' .:-=+*#%@', and draw the characters on a monospace grid each frame.

Use for: Developer tools and terminals; Loading screens with personality; Retro or hacker-themed brands
Avoid: Content that must be read by screen readers (mark it decorative)

Prompt:
Build an ASCII-art rotating torus in green on black. Compute the surface per character cell with a light direction, map luminance to the ramp ' .,-~:;=!*#$@', and render with fillText on a monospace grid. Make it responsive, cap devicePixelRatio at 2, pause when off-screen, and show a still frame when prefers-reduced-motion is set. No external libraries.

Guardrails:
- Mark the canvas aria-hidden; provide real text elsewhere.
- Respect prefers-reduced-motion: show a still frame instead of the animation.
- Pause when off-screen or when the tab is hidden (IntersectionObserver + visibilitychange).
- Keep text off busy animated areas, or give it a solid backing that passes WCAG contrast.
- One showpiece effect per page. If everything moves, nothing stands out.

## Holographic foil (CSS, light)

A card with a rainbow sheen that shifts as the pointer moves, like a rare trading card.

How it works: Layer a conic or linear rainbow gradient with mix-blend-mode over the card, move its position with the pointer, and tilt the card slightly in 3D.

Use for: Premium tiers and rewards; Membership or achievement cards; Product launches
Avoid: Large surfaces; Anything that must look serious or financial

Prompt:
Build a holographic foil card that tilts toward the pointer with a shifting rainbow sheen. Use CSS variables updated on pointermove for tilt and gradient position, a repeating linear rainbow with mix-blend-mode: color-dodge, and a glare highlight. Make it responsive, cap devicePixelRatio at 2, pause when off-screen, and show a still frame when prefers-reduced-motion is set. No external libraries.

Guardrails:
- Limit tilt to about 12 degrees; disable tilt for reduced motion.
- Respect prefers-reduced-motion: show a still frame instead of the animation.
- Pause when off-screen or when the tab is hidden (IntersectionObserver + visibilitychange).
- Keep text off busy animated areas, or give it a solid backing that passes WCAG contrast.
- One showpiece effect per page. If everything moves, nothing stands out.

## Bauhaus shapes (SVG, light)

Primary-colored circles, triangles and bars that slide, spin and settle into a balanced composition.

How it works: A few flat SVG primitives in red, yellow, blue and black on off-white, each with its own looping transform: rotate, translate, scale, staggered so the composition keeps rebalancing.

Use for: Editorial and portfolio sites; Section transitions; Brand intros
Avoid: Interfaces that need to feel calm and invisible

Prompt:
Build an animated Bauhaus composition. Use SVG with a red circle, blue triangle, yellow half-circle and black bars on #f1ece0, each on its own CSS transform loop with staggered delays and cubic-bezier easing. Make it responsive, cap devicePixelRatio at 2, pause when off-screen, and show a still frame when prefers-reduced-motion is set. No external libraries.

Guardrails:
- Use the shapes as framing, not behind text.
- Respect prefers-reduced-motion: show a still frame instead of the animation.
- Pause when off-screen or when the tab is hidden (IntersectionObserver + visibilitychange).
- Keep text off busy animated areas, or give it a solid backing that passes WCAG contrast.
- One showpiece effect per page. If everything moves, nothing stands out.

## Neon glow (CSS, light)

Glowing tube-light text and outlines with a gentle flicker.

How it works: Stacked text-shadow and box-shadow layers in the same hue create the glow; a keyframe flicker briefly drops the opacity a few times per cycle.

Use for: Night-life, gaming and music brands; Single headline moments; Dark-mode accents
Avoid: Body text; Light backgrounds

Prompt:
Build neon-sign text and a rounded outline on a dark wall. Use stacked text-shadow/box-shadow (2px, 8px, 24px, 48px) in magenta and cyan, and a subtle irregular flicker keyframe. Make it responsive, cap devicePixelRatio at 2, pause when off-screen, and show a still frame when prefers-reduced-motion is set. No external libraries.

Guardrails:
- Avoid rapid flicker: never more than 3 flashes per second (WCAG 2.3.1).
- Respect prefers-reduced-motion: show a still frame instead of the animation.
- Pause when off-screen or when the tab is hidden (IntersectionObserver + visibilitychange).
- Keep text off busy animated areas, or give it a solid backing that passes WCAG contrast.
- One showpiece effect per page. If everything moves, nothing stands out.

## Dithering (WebGL shader, medium)

A gradient or image rendered with a two-tone dot pattern, like an old Mac screen.

How it works: Compare each pixel's brightness against a repeating 4×4 or 8×8 Bayer threshold matrix and output only two colors; animate the underlying light so the pattern shimmers.

Use for: Retro and lo-fi brands; Image treatments; Backgrounds with texture
Avoid: Small detailed imagery; Text

Prompt:
Build a dithered moving light sphere in two colors. Write a WebGL fragment shader that shades a sphere, then applies 8×8 ordered (Bayer) dithering in pixel blocks to two colors. Make it responsive, cap devicePixelRatio at 2, pause when off-screen, and show a still frame when prefers-reduced-motion is set. No external libraries.

Guardrails:
- Use chunky pixels (3px or more) so the pattern doesn't alias on phones.
- Respect prefers-reduced-motion: show a still frame instead of the animation.
- Pause when off-screen or when the tab is hidden (IntersectionObserver + visibilitychange).
- Keep text off busy animated areas, or give it a solid backing that passes WCAG contrast.
- One showpiece effect per page. If everything moves, nothing stands out.

## Clay 3D (CSS, light)

Soft, matte, pastel shapes that look like modelling clay, gently bobbing.

How it works: Radial gradients with an offset highlight and a darker rim fake soft 3D shading; blurred shadows underneath and slow bobbing animation sell the weight.

Use for: Friendly consumer apps; Onboarding illustrations; Empty states
Avoid: Technical or data-heavy products

Prompt:
Build a clay-style 3D scene of pastel spheres and a capsule. Fake soft matte shading with offset radial gradients and inset shadows, soft ground shadows, and slow staggered bobbing. Make it responsive, cap devicePixelRatio at 2, pause when off-screen, and show a still frame when prefers-reduced-motion is set. No external libraries.

Guardrails:
- Keep contrast up on any labels; pastel on pastel fails easily.
- Respect prefers-reduced-motion: show a still frame instead of the animation.
- Pause when off-screen or when the tab is hidden (IntersectionObserver + visibilitychange).
- Keep text off busy animated areas, or give it a solid backing that passes WCAG contrast.
- One showpiece effect per page. If everything moves, nothing stands out.

## Halftone dots (WebGL shader, medium)

Images and gradients made of dots that grow and shrink with brightness, like print.

How it works: Divide the screen into a rotated grid; in each cell draw a circle whose radius follows the brightness of an underlying animated pattern.

Use for: Editorial and pop-art styles; Hero image treatments; Posters
Avoid: Photos of people's faces at small sizes

Prompt:
Build an animated halftone pattern in deep magenta on cream. In a fragment shader, rotate a grid 30°, compute a radial pulsing brightness field, and draw a dot per cell with radius from brightness. Make it responsive, cap devicePixelRatio at 2, pause when off-screen, and show a still frame when prefers-reduced-motion is set. No external libraries.

Guardrails:
- Use larger dots on small screens so the effect still reads.
- Respect prefers-reduced-motion: show a still frame instead of the animation.
- Pause when off-screen or when the tab is hidden (IntersectionObserver + visibilitychange).
- Keep text off busy animated areas, or give it a solid backing that passes WCAG contrast.
- One showpiece effect per page. If everything moves, nothing stands out.

## Kinetic typography (CSS, light)

Big type that moves: words slide, stretch, swap and loop in rhythm.

How it works: Heavy display type in a marquee band plus a word that swaps on a timed loop with a quick vertical slide; everything uses transforms only.

Use for: Launch pages and announcements; Event sites; Short brand statements
Avoid: Information people need to read carefully; Long sentences

Prompt:
Build a kinetic typography block on yellow. Show a looping marquee band ('TYPE IN MOTION') and a huge word that cycles through MOVE / LOUD / BOLD with a vertical slide every 1.2s. Make it responsive, cap devicePixelRatio at 2, pause when off-screen, and show a still frame when prefers-reduced-motion is set. No external libraries.

Guardrails:
- Keep the real message in static text for screen readers (aria-live off).
- Respect prefers-reduced-motion: show a still frame instead of the animation.
- Pause when off-screen or when the tab is hidden (IntersectionObserver + visibilitychange).
- Keep text off busy animated areas, or give it a solid backing that passes WCAG contrast.
- One showpiece effect per page. If everything moves, nothing stands out.

## Pixel art (Canvas 2D, light)

A tiny low-resolution scene scaled up with crisp, square pixels and simple frame animation.

How it works: Draw on a small canvas (e.g. 64×64) and scale it up with image-rendering: pixelated; animate a few elements by whole pixels per frame.

Use for: Games and playful brands; 404 and empty states; Achievements
Avoid: Corporate or premium tone

Prompt:
Build a pixel-art sunset scene with a bobbing character. Render on a 64×64 canvas with fillRect, scale up with image-rendering: pixelated, use a 12-color palette, and animate clouds and a character in whole-pixel steps. Make it responsive, cap devicePixelRatio at 2, pause when off-screen, and show a still frame when prefers-reduced-motion is set. No external libraries.

Guardrails:
- Snap to whole pixels; blurry scaling ruins the look.
- Respect prefers-reduced-motion: show a still frame instead of the animation.
- Pause when off-screen or when the tab is hidden (IntersectionObserver + visibilitychange).
- Keep text off busy animated areas, or give it a solid backing that passes WCAG contrast.
- One showpiece effect per page. If everything moves, nothing stands out.

## Particle swarm (Canvas 2D, medium)

Hundreds of glowing points that swirl as a flock around a shape or the pointer.

How it works: Each particle steers toward a target orbit with a little noise and drag, drawn with additive blending so overlapping points glow.

Use for: AI and data products; Hero backgrounds; Loading moments
Avoid: Low-power devices without a fallback; Behind body text

Prompt:
Build a particle swarm forming a swirling ring in violet. Animate ~600 particles on canvas 2D that steer toward a rotating ring with noise and damping, drawn with globalCompositeOperation 'lighter'. Make it responsive, cap devicePixelRatio at 2, pause when off-screen, and show a still frame when prefers-reduced-motion is set. No external libraries.

Guardrails:
- Halve the particle count on small screens.
- Respect prefers-reduced-motion: show a still frame instead of the animation.
- Pause when off-screen or when the tab is hidden (IntersectionObserver + visibilitychange).
- Keep text off busy animated areas, or give it a solid backing that passes WCAG contrast.
- One showpiece effect per page. If everything moves, nothing stands out.

## Risograph print (SVG, light)

Flat spot-color shapes with slight misregistration and grain, like a risograph poster.

How it works: Overlap two or three spot-color layers with mix-blend-mode: multiply, offset them by a pixel or two that drifts over time, and add an SVG noise grain.

Use for: Indie, creative and editorial brands; Illustrations and posters
Avoid: Interfaces that need precision and polish

Prompt:
Build a risograph-style sun-and-sea poster. Use SVG shapes in fluorescent pink, blue and yellow with mix-blend-mode multiply, a slight drifting misregistration, and an feTurbulence grain overlay. Make it responsive, cap devicePixelRatio at 2, pause when off-screen, and show a still frame when prefers-reduced-motion is set. No external libraries.

Guardrails:
- Keep misregistration small (≤3px) so edges stay readable.
- Respect prefers-reduced-motion: show a still frame instead of the animation.
- Pause when off-screen or when the tab is hidden (IntersectionObserver + visibilitychange).
- Keep text off busy animated areas, or give it a solid backing that passes WCAG contrast.
- One showpiece effect per page. If everything moves, nothing stands out.

## Glitch effect (CSS, light)

Text or images that jitter, split into RGB channels and slice horizontally in short bursts.

How it works: Two copies of the text in red and cyan, offset and clipped to random horizontal slices with clip-path, fire in short bursts between long calm periods.

Use for: Gaming, music and tech launches; Error or 404 moments
Avoid: Anything people need to read; Users sensitive to flashing

Prompt:
Build a glitch-text title. Use ::before/::after copies in red and cyan with mix-blend-mode screen, animate clip-path inset slices and small translateX jumps in 0.3s bursts every 3s. Make it responsive, cap devicePixelRatio at 2, pause when off-screen, and show a still frame when prefers-reduced-motion is set. No external libraries.

Guardrails:
- Keep bursts short and rare; never flash more than 3 times a second.
- Respect prefers-reduced-motion: show a still frame instead of the animation.
- Pause when off-screen or when the tab is hidden (IntersectionObserver + visibilitychange).
- Keep text off busy animated areas, or give it a solid backing that passes WCAG contrast.
- One showpiece effect per page. If everything moves, nothing stands out.

## Topographic lines (WebGL shader, medium)

Contour lines like a terrain map that slowly drift and reshape.

How it works: Evaluate smooth noise per pixel and draw a thin line wherever the value crosses an evenly spaced level; animate the noise slowly over time.

Use for: Outdoor, travel and maps brands; Calm hero backgrounds; Section dividers
Avoid: Behind detailed charts

Prompt:
Build drifting topographic contour lines in dark ink on sand. In a fragment shader, sample layered value noise, take fract(n * levels), and draw anti-aliased lines with fwidth at each level crossing. Make it responsive, cap devicePixelRatio at 2, pause when off-screen, and show a still frame when prefers-reduced-motion is set. No external libraries.

Guardrails:
- Keep the drift slow; it should feel like weather, not water.
- Respect prefers-reduced-motion: show a still frame instead of the animation.
- Pause when off-screen or when the tab is hidden (IntersectionObserver + visibilitychange).
- Keep text off busy animated areas, or give it a solid backing that passes WCAG contrast.
- One showpiece effect per page. If everything moves, nothing stands out.

## Glassmorphism (CSS, medium)

Frosted, translucent panels floating over colorful moving shapes.

How it works: A panel with backdrop-filter: blur and saturate, a semi-transparent fill and a light 1px border sits over animated gradient blobs.

Use for: Overlays, cards and control panels on rich backgrounds; OS-style interfaces
Avoid: Plain backgrounds (there's nothing to frost); Text-heavy panels without a solid fallback

Prompt:
Build a glassmorphism card over drifting gradient blobs. Use backdrop-filter: blur(20px) saturate(160%), rgba white fill, a 1px light border, and 3 slowly moving blurred color blobs behind. Make it responsive, cap devicePixelRatio at 2, pause when off-screen, and show a still frame when prefers-reduced-motion is set. No external libraries.

Guardrails:
- Provide a solid background fallback when backdrop-filter isn't supported or contrast drops.
- Respect prefers-reduced-motion: show a still frame instead of the animation.
- Pause when off-screen or when the tab is hidden (IntersectionObserver + visibilitychange).
- Keep text off busy animated areas, or give it a solid backing that passes WCAG contrast.
- One showpiece effect per page. If everything moves, nothing stands out.

## Paper cutout (SVG, light)

Layered flat shapes with soft shadows, like a paper diorama, gently moving in parallax.

How it works: Stack SVG layers (sky, sun, hills, sea) with drop shadows between them and move each layer a different small amount for depth.

Use for: Storytelling and onboarding; Children's and craft brands; Illustrated heroes
Avoid: Dense product UI

Prompt:
Build a paper-cutout landscape with layered hills, sea and sun. Stack SVG layers with drop-shadow filters, warm paper colors, and slow per-layer parallax bobbing. Make it responsive, cap devicePixelRatio at 2, pause when off-screen, and show a still frame when prefers-reduced-motion is set. No external libraries.

Guardrails:
- Keep parallax subtle (a few pixels) to avoid motion sickness.
- Respect prefers-reduced-motion: show a still frame instead of the animation.
- Pause when off-screen or when the tab is hidden (IntersectionObserver + visibilitychange).
- Keep text off busy animated areas, or give it a solid backing that passes WCAG contrast.
- One showpiece effect per page. If everything moves, nothing stands out.

## Vaporwave grid (CSS, light)

An endless neon grid racing toward a striped retro sun on a purple horizon.

How it works: A grid drawn with repeating gradients is tilted with perspective and rotateX, and its background position scrolls; a sun with gradient stripes sits on the horizon.

Use for: Retro, music and gaming brands; Event pages
Avoid: Professional or calm products

Prompt:
Build a vaporwave scene: a scrolling neon perspective grid toward a striped sunset sun. Use a repeating-linear-gradient grid on a plane with perspective and rotateX(60deg), animate background-position, and mask the sun with stripes. Make it responsive, cap devicePixelRatio at 2, pause when off-screen, and show a still frame when prefers-reduced-motion is set. No external libraries.

Guardrails:
- Slow the grid scroll for long views; it's tiring at speed.
- Respect prefers-reduced-motion: show a still frame instead of the animation.
- Pause when off-screen or when the tab is hidden (IntersectionObserver + visibilitychange).
- Keep text off busy animated areas, or give it a solid backing that passes WCAG contrast.
- One showpiece effect per page. If everything moves, nothing stands out.

## Flow fields (Canvas 2D, medium)

Thousands of fine lines following invisible currents, building up like hair or wind.

How it works: A noise function gives each point an angle; particles move along those angles and leave faint trails that slowly fade.

Use for: Generative art backgrounds; Brand moments for creative tools
Avoid: Behind content; Low-power devices

Prompt:
Build a flow field of glowing magenta trails on near-black. Move ~800 particles along angles from layered noise, draw short line segments each frame, and fade the canvas with a translucent fill. Make it responsive, cap devicePixelRatio at 2, pause when off-screen, and show a still frame when prefers-reduced-motion is set. No external libraries.

Guardrails:
- Reset particles that leave the canvas so density stays even.
- Respect prefers-reduced-motion: show a still frame instead of the animation.
- Pause when off-screen or when the tab is hidden (IntersectionObserver + visibilitychange).
- Keep text off busy animated areas, or give it a solid backing that passes WCAG contrast.
- One showpiece effect per page. If everything moves, nothing stands out.

## Metaballs (WebGL shader, medium)

Glowing blobs that merge and split smoothly when they get close, like a lava lamp.

How it works: Each blob contributes a field that falls off with distance; summing the fields and thresholding the total gives smooth merging outlines.

Use for: Playful heroes; Loading and transition states; Music and wellness brands
Avoid: Small UI elements

Prompt:
Build orange lava-lamp metaballs on a dark background. In a fragment shader, sum r²/d² for 6 moving centers, threshold with smoothstep, and color by field strength. Make it responsive, cap devicePixelRatio at 2, pause when off-screen, and show a still frame when prefers-reduced-motion is set. No external libraries.

Guardrails:
- Fewer, slower blobs read better than many fast ones.
- Respect prefers-reduced-motion: show a still frame instead of the animation.
- Pause when off-screen or when the tab is hidden (IntersectionObserver + visibilitychange).
- Keep text off busy animated areas, or give it a solid backing that passes WCAG contrast.
- One showpiece effect per page. If everything moves, nothing stands out.

## Ray-marched fractals (WebGL shader, heavy)

An infinitely detailed 3D fractal, lit and slowly rotating, rendered entirely on the GPU.

How it works: For each pixel a ray steps through space using a distance estimator for a fractal (like a Mandelbulb) until it hits the surface, then shades by normal and step count.

Use for: Showpiece heroes for creative or technical brands; Art and music visuals
Avoid: Phones without a fallback image; Anything near interactive content

Prompt:
Build a slowly rotating ray-marched Mandelbulb with copper lighting. Write a fragment shader with a Mandelbulb distance estimator (power 8), ~64 march steps, normals by central differences, and glow from step count. Render at half resolution and upscale. Make it responsive, cap devicePixelRatio at 2, pause when off-screen, and show a still frame when prefers-reduced-motion is set. No external libraries.

Guardrails:
- Render at reduced resolution and fall back to a still image on low-end devices.
- Respect prefers-reduced-motion: show a still frame instead of the animation.
- Pause when off-screen or when the tab is hidden (IntersectionObserver + visibilitychange).
- Keep text off busy animated areas, or give it a solid backing that passes WCAG contrast.
- One showpiece effect per page. If everything moves, nothing stands out.

# Screen patterns

## Login: must-haves

- Never gate sign-in behind the interaction: the form works the moment the page loads, and any focus or typing skips the show.
- A real <form> with <label>s, type="email"/"password", and autocomplete="username" + "current-password" (or "new-password" on sign-up, "one-time-code" for codes) so password managers, passkeys and SMS autofill work.
- Keyboard path: Tab moves email, password, submit in order; Enter submits.
- Errors in plain words next to the field, announced (aria-live), with focus moved to the field to fix. Don't clear what they typed.
- Answer the submit within 100ms (pending state, button disabled while the request runs).
- Respect prefers-reduced-motion: the delight becomes a still state, never a blocker.
- Any character or effect is decorative: aria-hidden, and text contrast never depends on it.

## Lamp pull (login: Sign in)

A dark room with a floor lamp. Pull the cord and warm light spills across the wallpaper, the floor and the sign-in card.

Why it's engaging: A physical, playful first action with spring physics on the cord, dust drifting in the beam and a warm reveal of the room.
Why it also helps: Sets a calm, focused mood for a product with a home or night feel. The form is dim but usable from the start, and focusing it turns the light on, so nothing is gated.

Use for: Smart-home, audio and lighting brands; Cozy, night-time or home products; A memorable first impression on a marketing-led login
Avoid: Enterprise or high-frequency logins (people sign in daily and just want in); Products people use under stress (banking, healthcare)

Concept: Coming home at night: you switch on the light, and the room (and your account) appears.
Palette: #0c0a08, #16130f, #f4c35a, #ffd98a, #f3ede2, #a89f90
Type: Fraunces italic 600 for the greeting (fallback Palatino/Georgia), system sans for labels and controls.
Motion: The cord stretches on a spring and snaps back; light fades up over 0.5s, revealing wallpaper only where it falls, with slow drifting dust motes.

Riffs (same spirit, other brands):
- A neon OPEN sign that flickers on above the form for a late-night food app.
- A theatre curtain cord that parts velvet curtains onto the form for a ticketing app.
- A breaker switch that lights up a workshop bench for a maker or tools brand.

Guardrails:
- The cord is a real button (click, Enter, Space) as well as draggable.
- Focusing any field turns the light on, so the gesture is never required.
- Never gate sign-in behind the interaction: the form works the moment the page loads, and any focus or typing skips the show.
- A real <form> with <label>s, type="email"/"password", and autocomplete="username" + "current-password" (or "new-password" on sign-up, "one-time-code" for codes) so password managers, passkeys and SMS autofill work.
- Keyboard path: Tab moves email, password, submit in order; Enter submits.
- Errors in plain words next to the field, announced (aria-live), with focus moved to the field to fix. Don't clear what they typed.
- Answer the submit within 100ms (pending state, button disabled while the request runs).
- Respect prefers-reduced-motion: the delight becomes a still state, never a blocker.
- Any character or effect is decorative: aria-hidden, and text contrast never depends on it.

Prompt:
Build a login screen as a dark room with an SVG floor lamp on the left and the sign-in card on the right (lamp above the card on phones). The lamp's pull cord is a real button that can also be dragged down past 30px; switching on fades in a warm light cone, a glow, a pool of light on the floor, faint wallpaper stripes masked to the lit area, and drifting dust motes, and brightens the dimmed card. Focusing any field also turns the light on. Use a Fraunces italic greeting, a gradient amber Sign in button, real labels, autocomplete username/current-password, inline aria-live errors with focus on the field, and a pending state. Show still states under prefers-reduced-motion and use no libraries.

## Elevator (login: Sign in)

An art-deco elevator lobby where the sign-in form is a brass plaque and its submit is the call button: the needle sweeps up while you're signed in, then the doors open on a warm car that welcomes you by name.

Why it's engaging: Pressing sign-in feels like calling an elevator, with a lit call button, a sweeping floor needle, a soft chime and brass doors sliding open on your welcome.
Why it also helps: The button lights the instant you press it and the needle shows progress, so there's no dead wait; errors drop the needle and light a red lamp, and the open car hands you straight to the next action.

Use for: Premium, finance-adjacent and hospitality brands; Products that sign people in to a "space" (workspaces, clubs, members' areas)
Avoid: Very fast auth where the sweep would barely play; Playful or casual brands

Concept: Signing in is going up: you call the elevator, it rises to your floor, and the doors open onto your space.
Palette: #0b231e, #d4ad5f, #f3d998, #f1e6c8, #2a1608, #ff5a4a
Type: Marcellus (fallback Didot/Georgia) for the plaque headline, dial numerals and car welcome; system sans with tracked uppercase for labels and the call button.
Motion: The call bulb lights instantly, the floor needle sweeps across the semicircular dial for about a second, and on success the doors part with a slow ease-in-out to reveal the lit car.

Riffs (same spirit, other brands):
- A vintage train platform with a split-flap board that flips to "Now boarding: Ada" before the carriage door opens.
- A speakeasy door with a sliding peephole: the slot opens, eyes check you, and the door swings into a warm bar.
- An observatory dome whose shutter slides open onto the stars when you sign in.

Guardrails:
- The call button is the form's submit button, never a gesture to discover, and reads "Calling…" while pending.
- The chime is quiet, plays only after the submit press and never under reduced motion; the car's "Go to dashboard" link stays hidden from assistive tech until the doors open.
- Never gate sign-in behind the interaction: the form works the moment the page loads, and any focus or typing skips the show.
- A real <form> with <label>s, type="email"/"password", and autocomplete="username" + "current-password" (or "new-password" on sign-up, "one-time-code" for codes) so password managers, passkeys and SMS autofill work.
- Keyboard path: Tab moves email, password, submit in order; Enter submits.
- Errors in plain words next to the field, announced (aria-live), with focus moved to the field to fix. Don't clear what they typed.
- Answer the submit within 100ms (pending state, button disabled while the request runs).
- Respect prefers-reduced-motion: the delight becomes a still state, never a blocker.
- Any character or effect is decorative: aria-hidden, and text contrast never depends on it.

Prompt:
Build a login screen as an art-deco elevator lobby: an emerald fluted wall, a marble floor, and a brass elevator with sunburst-inlaid doors under a semicircular floor dial (L to 9) with a needle. The sign-in form is a deco plaque (brass double border, corner fans, Marcellus headline) with real labels, autocomplete username/current-password, and a pill submit styled as an elevator call button whose bulb lights the moment it's pressed. While the request runs, the needle sweeps up and an up-lamp glows (button reads "Calling…" and is disabled). On a wrong password the needle drops back, a red stop lamp lights, and an inline aria-live error appears with focus on the password field. On success a soft two-tone chime plays, the doors slide open on a warm wood-panelled car reading "Welcome back, <Name>" with a "Go to dashboard" link that then gets focus. Make it responsive to 390px (elevator above the plaque), show still states under prefers-reduced-motion, and use no libraries.

## Vault dial (login: Verify)

Two-step verification as a bank vault: each digit of the code spins the combination dial, and a correct code retracts the bolts and swings the door open onto warm light.

Why it's engaging: Typing a code becomes cracking a safe: brass number wheels roll in, the dial spins to every digit, and the heavy door swinging open is a real payoff.
Why it also helps: It is ONE real input with autocomplete="one-time-code", so SMS autofill and pasting "482 913" or "482-913" just work, it submits itself at six digits, and Resend counts down in plain sight.

Use for: Two-factor and new-device verification; Fintech, crypto and security products that want to feel safe and premium; Unlocking a protected area or vault feature
Avoid: Codes longer than 8 characters; Very light, minimal brands

Concept: Your code is the combination; the account is the vault.
Palette: #0e1114, #2b3239, #a7b2bc, #c9a24a, #f0d88f, #ffbe62
Type: IBM Plex Mono throughout: 700 for the headline, engraved digits and brass plates, 400–600 for copy (fallback ui-monospace / SF Mono / Menlo).
Motion: The dial spins to each digit, alternating direction like a real lock; on success the bolts retract one by one, the wheel turns and the door swings on its hinge (3D rotateY); on error the dial shakes and the red lamp blinks.

Riffs (same spirit, other brands):
- A hotel-room keycard reader whose LED strip fills one segment per digit and clicks green, for a travel or hospitality app.
- An old rotary phone where each digit dials and the line connects on the last one, for a retro communications brand.
- A space-station airlock where each digit pressurizes one chamber and the hatch hisses open, for a gaming or developer tool.

Guardrails:
- The six slots and the vault are aria-hidden; screen readers get one labelled input and announced messages.
- The door opens only after the code verifies; under reduced motion the bolts and door jump straight to their final state.
- Never gate sign-in behind the interaction: the form works the moment the page loads, and any focus or typing skips the show.
- A real <form> with <label>s, type="email"/"password", and autocomplete="username" + "current-password" (or "new-password" on sign-up, "one-time-code" for codes) so password managers, passkeys and SMS autofill work.
- Keyboard path: Tab moves email, password, submit in order; Enter submits.
- Errors in plain words next to the field, announced (aria-live), with focus moved to the field to fix. Don't clear what they typed.
- Answer the submit within 100ms (pending state, button disabled while the request runs).
- Respect prefers-reduced-motion: the delight becomes a still state, never a blocker.
- Any character or effect is decorative: aria-hidden, and text contrast never depends on it.

Prompt:
Build a two-step verification screen as a bank vault: a brushed-steel circular door in a dark frame with rivets, eight bolts, a VAULT plate, a status lamp, a diagonal spoked brass handle and a central brass combination dial (50 ticks, numbers 0–9). Beside it (below on phones), a dark instrument panel with brass screws holds six engraved brass number slots that are really ONE transparent input (inputmode numeric, autocomplete one-time-code, strip non-digits so pasted '123 456' works). Each typed digit rolls into its slot and spins the dial to that number, alternating direction; at six digits the form auto-submits: the lamp pulses amber while pending; a wrong code shakes the dial, blinks the lamp red and shows an inline message; a correct code turns the lamp green, retracts the bolts one by one, spins the handle and swings the door open (CSS rotateY on the hinge) onto a warm-lit interior reading 'You're in'. Include a visible Resend countdown, aria-live messages, decorative art aria-hidden, still states under prefers-reduced-motion, and no libraries.

## Paper plane (login: Sign in)

Passwordless sign-in as air mail on a cutting mat: send the letter and it folds into a paper plane that flies off along a dotted route, then a postcard tells you where the link went.

Why it's engaging: A tactile, story-like send moment, from stamp and postmark to fold and flight, that turns the dull 'check your email' step into the memorable peak of the flow.
Why it also helps: The postcard shows the exact address, one-tap Open Gmail / Open Outlook buttons, a fix-a-typo action and a visible resend countdown, which is exactly where magic-link flows usually lose people.

Use for: Passwordless or magic-link sign-in; Consumer, creative and indie products with a crafted brand; Low-frequency products where people forget passwords
Avoid: Work tools used on shared devices without email access; High-frequency daily logins where the flight would get old

Concept: Your sign-in link is a letter you post by air mail, and the inbox is the destination.
Palette: #26463a, #f7f4ec, #1c2742, #d2442f, #2c55a3, #e9b949
Type: Instrument Serif for headings and the email entry (fallback Palatino/Georgia), system sans for body and buttons, system mono for postal labels and fine print.
Motion: Polygon-morph fold of the card into a two-tone plane, then a bezier flight with a dotted trail, then a postcard that springs in with a slight tilt.

Riffs (same spirit, other brands):
- A pneumatic-tube capsule that whooshes up a brass pipe, for a retro office or fintech brand.
- A message in a bottle bobbing out to sea on a moonlit beach, for a travel or wellness app.
- A carrier pigeon taking off from a rooftop with the link tied to its leg, for a playful community app.

Guardrails:
- The fold and flight start only after the request succeeds; reduced motion skips straight to the postcard, which gets focus so screen readers announce it.
- An invalid address triggers one crumple-shake with a plain-words fix, and the field keeps what was typed.
- Never gate sign-in behind the interaction: the form works the moment the page loads, and any focus or typing skips the show.
- A real <form> with <label>s, type="email"/"password", and autocomplete="username" + "current-password" (or "new-password" on sign-up, "one-time-code" for codes) so password managers, passkeys and SMS autofill work.
- Keyboard path: Tab moves email, password, submit in order; Enter submits.
- Errors in plain words next to the field, announced (aria-live), with focus moved to the field to fix. Don't clear what they typed.
- Answer the submit within 100ms (pending state, button disabled while the request runs).
- Respect prefers-reduced-motion: the delight becomes a still state, never a blocker.
- Any character or effect is decorative: aria-hidden, and text contrast never depends on it.

Prompt:
Build a passwordless sign-in screen styled as air mail on a green cutting mat (grid lines, ruler edges, a pencil, paperclip and loose stamps as aria-hidden props). The form is a letter card with a red/blue airmail-stripe border, a perforated stamp, a postmark, an Instrument Serif headline and a single ruled-line email field (type=email, autocomplete=email) with an 'Email me a sign-in link' button. On submit show a pending state immediately; on success, morph the card into a two-tone paper plane with JS-tweened SVG polygons, fly it along a cubic bezier toward the top right while drawing a dotted trail, then slide in a postcard reading 'Check your email' with the address, Open Gmail / Open Outlook links, 'Use a different email' and a 30s resend countdown, and move focus to it. Invalid email gives a single crumple-shake plus an inline aria-live message and focus back on the field. Under prefers-reduced-motion skip the fold and flight and show the postcard. No libraries.

## Password garden (login: Sign up)

Sign-up where each password rule is a seed in a raised garden bed: meet a rule and its flower grows and blooms, while the sun rises from dawn to bright day as the password gets stronger.

Why it's engaging: Each rule you meet grows its own flower, so making a strong password feels like tending a garden, and finishing it fills the bed with blooms and brings in a butterfly.
Why it also helps: Every requirement is visible and checked live, the strength level is spelled out in text, and the never-disabled button names exactly which rules are still missing while their seeds wiggle.

Use for: Sign-up and change-password forms; Consumer, wellness, education and family products; Brands with a warm, optimistic tone
Avoid: Sign-in forms (never reveal rules for an existing password); Serious enterprise or security-tool brands

Concept: A strong password is a garden you grow: rules are seeds, strength is sunrise.
Palette: #2e7a4b, #ffc23d, #ff6b57, #7468f0, #8d5a35, #7cc4e8
Type: Fraunces bold for headings and the brand (fallback Palatino/Georgia), system sans for labels, body and buttons, mono for the wooden plant markers.
Motion: Stems draw upward with stroke-dashoffset, leaves and heads spring open in sequence, the sky blends from dawn to day as the sun rises, and on success the flowers sway and a butterfly flutters in to land.

Riffs (same spirit, other brands):
- A city skyline where each rule lights a building's windows, ending in fireworks, for a fintech or urban app.
- An aquarium where each rule adds a fish and plants, with clearer water as strength grows, for a calm or kids' brand.
- A rocket on a launchpad whose fuel tanks fill per rule and that lifts off on success, for a developer or startup tool.

Guardrails:
- Rule state is in the form as text (with visually hidden done / not yet labels), so the garden is purely decorative and aria-hidden.
- Use autocomplete="new-password" with a Show/Hide toggle so password managers can suggest a strong password, which then blooms all three flowers at once.
- Never gate sign-in behind the interaction: the form works the moment the page loads, and any focus or typing skips the show.
- A real <form> with <label>s, type="email"/"password", and autocomplete="username" + "current-password" (or "new-password" on sign-up, "one-time-code" for codes) so password managers, passkeys and SMS autofill work.
- Keyboard path: Tab moves email, password, submit in order; Enter submits.
- Errors in plain words next to the field, announced (aria-live), with focus moved to the field to fix. Don't clear what they typed.
- Answer the submit within 100ms (pending state, button disabled while the request runs).
- Respect prefers-reduced-motion: the delight becomes a still state, never a blocker.
- Any character or effect is decorative: aria-hidden, and text contrast never depends on it.

Prompt:
Build a sign-up screen with a full-bleed illustrated SVG garden (dawn-to-day sky gradient, rising sun, hills, picket fence, raised wooden bed with three seeds and wooden markers) behind a white form card with email (autocomplete=username) and password (autocomplete=new-password, Show/Hide toggle) fields. Each password rule (10+ characters; letters and a number; doesn't contain the email name) maps to one seed: when met, draw its stem with stroke-dashoffset (pathLength=1) and spring-scale its leaves and flower head (sunflower, tulip, cosmos). Show a sprout while typing, interpolate the sky from dawn to day and raise the sun with rules met, and show a 3-segment meter with Weak / Getting there / Strong text. List the rules in the form with check badges and visually hidden status text. Never disable submit: if rules are missing, list them in an aria-live message, mark them, wiggle their seeds and focus the field. On success, show a pending state, then full bloom, swaying flowers and a butterfly, and swap the card to 'Account created' with focus on the heading. Respect prefers-reduced-motion with still states and use no libraries.

## Night owl (login: Sign in)

A moonlit forest where an owl on a branch keeps watch: its eyes follow your email, its wings cover its eyes for your password, and it hoots when you're in.

Why it's engaging: A character with real personality that visibly looks away while you type a secret, peeks when you press Show, frowns at a wrong password and does a happy hop on success.
Why it also helps: Every form state (typing, secret entry, revealed password, error, success) gets an unmistakable, friendly signal, which makes the Show control discoverable and errors feel less punishing.

Use for: Consumer apps with a night, sleep or calm-evening brand; Products for families and kids; Occasional-use sign-ins where a memorable moment pays off
Avoid: Serious finance, health or enterprise tools; Daily high-frequency logins where the show wears thin

Concept: A night watchman who politely looks away while you whisper the password.
Palette: #070a1f, #2a1d63, #f3ecd2, #f6c25b, #7a5848, #eeeaff
Type: Nunito 800–900 for the headline and button (rounded, friendly), Nunito 600–700 for fields and copy (fallback ui-rounded / system-ui).
Motion: Springy wing folds, caret-tracking pupils, random blinks, drifting fireflies; one shake on error and one hop on success.

Riffs (same spirit, other brands):
- A sleepy cat on a windowsill that tucks its paw over its eyes for the password, for a cozy home or bedtime-story app.
- A lighthouse keeper's lamp that sweeps toward each field you type in and turns away during the password, for a coastal travel brand.
- A shy houseplant whose leaves fold closed over a little face for the password and bloom on success, for a gardening or wellness app.

Guardrails:
- Owl and forest are aria-hidden; every state is also in text in the announced message line.
- The error ruffle plays once, and blinking and fireflies stop under prefers-reduced-motion.
- Never gate sign-in behind the interaction: the form works the moment the page loads, and any focus or typing skips the show.
- A real <form> with <label>s, type="email"/"password", and autocomplete="username" + "current-password" (or "new-password" on sign-up, "one-time-code" for codes) so password managers, passkeys and SMS autofill work.
- Keyboard path: Tab moves email, password, submit in order; Enter submits.
- Errors in plain words next to the field, announced (aria-live), with focus moved to the field to fix. Don't clear what they typed.
- Answer the submit within 100ms (pending state, button disabled while the request runs).
- Respect prefers-reduced-motion: the delight becomes a still state, never a blocker.
- Any character or effect is decorative: aria-hidden, and text contrast never depends on it.

Prompt:
Build a full-bleed night-forest login: deep blue-violet sky with a glowing moon, layered pine silhouettes and drifting fireflies, and an SVG owl perched on a branch that runs off the left edge. Put a dark-glass sign-in panel (email, password with Show, Forgot password, amber Sign in button) on the right on desktop and below the owl on phones. The owl's pupils follow the email caret; while the password is focused both wings rotate up over its eyes; Show lifts one wing so one eye peeks; it blinks every few seconds; on error it shakes once, its ear tufts drop and frown brows appear; on success it shows happy arc eyes, a 'hoo hoo!' speech bubble and a hop. Keep it a real form (labels, autocomplete username/current-password, inline aria-live errors with focus moved to the field, pending state within 100ms), never block the form, make the art aria-hidden, and freeze all motion under prefers-reduced-motion. No libraries.

## Key rack (login: Sign in)

A boutique-hotel front desk at night where each way to sign in is a brass key on the rack, and the desk remembers which key you took last time.

Why it's engaging: Returning visitors see their cubby light up and their key swing forward with a "Last used" tag while the desk bell rings, and choosing a key slides it off its hook toward you.
Why it also helps: It ends the "was it Google or GitHub?" guess that creates duplicate accounts: the last method becomes one big "Continue with …" button on the registration card.

Use for: Any login with two or more sign-in methods; Hospitality, travel and premium consumer brands; Products people return to every few weeks
Avoid: Shared or public computers unless "Forget this device" stays visible; High-frequency enterprise logins that need maximum speed

Concept: Signing in is checking in: your account is a room, and the front desk keeps your key waiting.
Palette: #24130f, #5a3420, #d8ae5e, #f6edd9, #8a2b22, #2a1a10
Type: DM Serif Display (fallback Georgia) for the hotel sign, room numbers and card headline; system sans for labels and controls, with small-caps tracking on kickers.
Motion: Keys swing on their hooks with damped pendulum physics, the bell rocks when you return, and a chosen key lifts and slides toward you; all disabled under reduced motion.

Riffs (same spirit, other brands):
- A coat-check counter with numbered tickets, where the stub you kept last time is pinned to the front.
- A marina dock board where each provider is a boat at its berth and yours is the one with its lights on.
- A library card catalogue where your drawer is already pulled out with a brass label plate.

Guardrails:
- Every key is a real button named "Continue with <provider>" (marked "last used" when it was); the decorative cubbies are aria-hidden.
- Only the method and a masked hint are stored, with localStorage wrapped in try/catch; "Forget this device" clears it.
- Never gate sign-in behind the interaction: the form works the moment the page loads, and any focus or typing skips the show.
- A real <form> with <label>s, type="email"/"password", and autocomplete="username" + "current-password" (or "new-password" on sign-up, "one-time-code" for codes) so password managers, passkeys and SMS autofill work.
- Keyboard path: Tab moves email, password, submit in order; Enter submits.
- Errors in plain words next to the field, announced (aria-live), with focus moved to the field to fix. Don't clear what they typed.
- Answer the submit within 100ms (pending state, button disabled while the request runs).
- Respect prefers-reduced-motion: the delight becomes a still state, never a blocker.
- Any character or effect is decorative: aria-hidden, and text contrast never depends on it.

Prompt:
Build a login screen set at a boutique-hotel front desk at night: a walnut pigeonhole rack holds brass keys with engraved fobs (Google 101, Apple 102, GitHub 103, Email 104; text and initials only, no logos), each a real button named "Continue with <provider>". Remember the last method on this device in localStorage (method and masked hint only, try/catch). Returning visitors see that cubby glow, its key swing with a "Last used" tag, a desk bell ring, and a cream registration card that says "Welcome back. Last time you used GitHub (@a•••)" with a full-width primary "Continue with GitHub". Choosing a key animates it sliding off its hook toward the viewer. The Email key opens an inline email and password form (autocomplete username/current-password, inline aria-live errors, pending state). Include "Forget this device", make it responsive to 390px, and show still states under prefers-reduced-motion. No libraries.

## Constellation (login: Sign in)

A deep night sky where every character you type places a star, and the stars join into a constellation that glows and takes your name when you sign in.

Why it's engaging: Typing quietly draws something beautiful, and success ends with a shooting star and a personal constellation like "Ada's Heron".
Why it also helps: A faint ghost constellation shows how far along you are while you type, the newest stars flicker red on an error, and the solid card keeps every label and message fully legible.

Use for: AI, creative, music and wellness products; Dark-themed brands that want a calm, memorable first moment
Avoid: Light, minimal brands; Low-power devices if the still fallback is removed

Concept: Your sign-in is a small act of creation: the letters you type become stars, and finishing makes them a constellation.
Palette: #04050d, #0c0e1d, #b9adff, #ffd27a, #eef0ff, #ff8a7a
Type: Sora (fallback system sans) at 300 for the sky caption and constellation name, 600 for the card headline.
Motion: Stars bloom in as you type and lines draw themselves between them, error stars flicker red briefly, and success sends one shooting star while the lines warm to gold.

Riffs (same spirit, other brands):
- A koi pond where each keystroke drops a lily pad, and the koi gather into a circle when you sign in.
- A city skyline at dusk where each character lights a window, and success switches on the whole block.
- A seed-and-vine path where letters plant seeds that bloom into a flower bearing your initial.

Guardrails:
- The sky is an aria-hidden canvas behind a solid card, so contrast never depends on it; the constellation name is also announced in the status text.
- The loop pauses while the tab is hidden, and reduced motion draws a single still sky with no twinkle or shooting star.
- Never gate sign-in behind the interaction: the form works the moment the page loads, and any focus or typing skips the show.
- A real <form> with <label>s, type="email"/"password", and autocomplete="username" + "current-password" (or "new-password" on sign-up, "one-time-code" for codes) so password managers, passkeys and SMS autofill work.
- Keyboard path: Tab moves email, password, submit in order; Enter submits.
- Errors in plain words next to the field, announced (aria-live), with focus moved to the field to fix. Don't clear what they typed.
- Answer the submit within 100ms (pending state, button disabled while the request runs).
- Respect prefers-reduced-motion: the delight becomes a still state, never a blocker.
- Any character or effect is decorative: aria-hidden, and text contrast never depends on it.

Prompt:
Build a login screen over a full-screen canvas night sky: a seeded twinkling star field and soft nebula gradients, plus a faint dotted ghost constellation (28 anchors along a sweeping wing-shaped curve) in the open sky beside the card on desktop or above it on phones. Each character typed in the email or password fields adds a star at the next anchor with a bloom-in and a line drawn from the previous star; deleting removes stars. On a wrong password the newest four stars flicker red. On success a shooting star crosses the sky, the constellation turns gold, and a name like "Ada's Heron" (from the email name) appears in the sky and in the status message. Keep the card solid with real labels, autocomplete username/current-password, aria-live inline errors and a pending state. Pause rendering when the tab is hidden, draw a still frame under prefers-reduced-motion, make it responsive to 390px, and use no libraries.