Use for an explicitly requested immersive experience, atmosphere, narrative depth or a surface that should feel like a place. A portfolio or launch page does not automatically need this route. ADS owns product scope, direction and review. This is a palette of techniques, not a required stack or another build loop.
Establish the world
Recover the existing brief, references and prior answers. State the setting, core metaphor and intended feeling in the task's brief. For example, an investigation uses evidence and case files; a laboratory uses specimens and observations; a natural world uses growth and seasons. Translate the metaphor into useful navigation, grouping or feedback, not fake operational telemetry.
When a material creative direction remains unresolved, bring a small reviewable target and recommendation. Proceed with already-settled direction without another approval ceremony. The real product must remain explainable without its metaphor.
Choose an atmosphere, do not accumulate layers
Use the fewest techniques that create the intended feeling. Blank space, flat color and a single type family can all be deliberate.
- Material: subtle grain or paper texture may establish tactility. The noise and gradient examples in whimsical-design are optional recipes. Keep decorative overlays non-interactive and below meaningful content.
- Light and depth: a static glow, restrained vignette or layered plane can establish space. Verify contrast and cost on the target browser; blur is not proof of depth or polish.
- Environmental details: use small peripheral labels only when they convey truthful, useful context. Sentence-case examples: "Camera 04 recording", "Sample 0042", "Comms available". Do not fabricate live status, dates, counters or loading percentages.
- Signature effect: one purposeful spotlight or scroll-linked plane may reinforce exploration. Avoid decorative dots, particle fields, flashing/flicker and ambient motion for its own sake.
- Pointer treatment: keep the native cursor by default. A requested contextual treatment must preserve hit targets, focus, native affordances and coarse-pointer behavior. Do not add a dot follower or make interaction depend on hover.
Typography as character
Use the established type system first. A display/body contrast or a monospace role can support the metaphor, but there is no minimum font count. Hierarchy comes from readable scale, weight, spacing and grouping, not compulsory dramatic headlines. Preserve sentence case and exact identifiers.
Motion choreography
Consult web-animation-design only for a scoped motion job. Motion should explain arrival, causality, continuity or a deliberate expressive beat. Content may simply appear. Do not require every section to reveal, every list to stagger or GSAP to be installed.
For an existing scroll-linked effect, a slower background plane can suggest depth. Preserve ordinary scrolling, readable content and direct navigation; linear mapping can be appropriate for direct scroll tracking. For a cinematic expressive entrance, establish the reason for a longer duration separately from fast product-control defaults. Cap sequences and keep actions usable immediately.
Verify normal, interrupted and reduced-motion behavior in a real browser, including target mobile/WebKit. A still can establish composition but not scroll behavior, timing or performance. Reduced motion must expose the complete content without parallax or forced waiting.
Loading follows real work
Never add a minimum-duration loader to create atmosphere. Cached or immediately available content should appear immediately. If assets genuinely need loading, preserve a readable shell and useful action; report real progress only when measurable, otherwise use honest status. Do not hide usable content behind a simulated terminal, progress counter or full-screen curtain. Optional sound needs user control and must not autoplay unexpectedly.
Project showcase options
For work or case studies, choose structure from the visitor's task. An evidence board can combine large preview cards, a detail viewer, useful metadata and an image gallery. A grid, list or direct article may be better for scanning, deep links or mobile use than a horizontal slider.
When a viewer is justified, preserve keyboard operation, Escape/close behavior, direct entry and return to the originating item with reading context. Do not force every project into a full-screen modal or let the metaphor bury the work.
Review the experience in ADS
- Does the setting reinforce the real job without requiring internal knowledge?
- Are primary actions, long labels and actual project artifacts readable and unobscured at target sizes?
- Can a visitor understand the product input/output without decorative imagery?
- Do chosen effects survive actual interaction and reduced motion without delays?
- Is there evidence for the intended feeling, not just successful rendering? Retain the user's taste judgment.
No texture, custom cursor, loader, font count or atmospheric-layer quota is a gate. Keep reference/result pairs with actual acceptance status. Classify new feedback under the existing owner rather than automatically expanding this skill after each build.
Reference leads, not required aesthetics
When a specific reference is useful, inspect its current source and intended property before adopting a technique: Killian Herzer for investigation framing, Inflight for mission-control language, Poolsuite for nostalgic identity, Lusion for immersive depth, and Void for restrained atmosphere. These names are discovery leads, not current capability claims or instructions to recreate their stack.