Name the need
Escape, reset, or recharge gives the interaction an emotional entry point.
LIVE · IMMERSIVE EXPERIENCE
Lumen
Micro Journey
A sixty-second emotional reset built around discovering an unknown landscape with light. The reveal does more than decorate: it powers the explore, unlock, and take-away loop.
Take one minute.
Go somewhere else.
ENTER EXPERIENCE ↗01
PRODUCT MODEL
WHY IT EXISTSSTARTING PROBLEM
A beautiful reveal effect had no reason to continue.
PRODUCT PROMISE
Turn one minute of attention into a small emotional reset by letting the user discover an unknown landscape rather than passively view it.
The user leaves with a downloadable postcard, a copied quote, and a next destination.Move with light
A weighted beam reveals the landscape while a spatial grid records meaningful movement.
Earn the context
Destination, coordinates, and editorial copy appear only after exploration is complete.
Keep something useful
Download a designed postcard, copy the quote, or continue to another place.
02
STYLE DNA
VISUAL + BEHAVIORAL RULESNear-black with one acid accent
Low-saturation darkness creates immersion; a single scene-aware accent communicates state.
System sans meets emotional serif
Neutral sans-serif handles function. High-contrast italic serif appears only on emotional language.
Narrative and experience stay separate
The left side explains why. The right side lets the user immediately discover how.
Slow movement with physical weight
Pointer tracking carries inertia; the mask opens and closes more slowly than a typical hover state.
Metadata creates credibility
Coordinates, progress, indexing, and grids make the experience feel like a real exploration tool.
Explore, unlock, take away
A completion condition and a useful result turn the visual effect into a product loop.
03
SOURCE & PROMPT
ORIGINAL + DISTILLEDREUSE CONTRACTTurn an effect into
Turn an effect into
callable product rules.
The original component explains how the light behaves. The optimized prompt explains why the interaction exists, what the user completes, and which design decisions another AI should preserve.
DRAFT V0.1BLIND REPRODUCTION PENDING
The product, build, copy, and download loop are verified. The prompt has not yet generated a fresh project without access to the reference implementation.
ImageHover
A 208-line React and Tailwind component used as the initial technical reference for the responsive pointer-following image mask.
- Responsive 70px to 140px reveal radius
- Pointer interpolation at 0.18
- Radius interpolation at 0.13
- Direct touch tracking
- Multi-stop mask and screen-blended glow
'use client'
const values = {
LERP_SPEED: 0.18,
RADIUS_LERP_SPEED: 0.13,
MAX_RADIUS: responsiveRadius,
SOFT_EDGE: responsiveSoftEdge,
}
// Smooth the pointer and radius with requestAnimationFrame.
setLerpedPos(previous => ({
x: previous.x + (mousePos.x - previous.x) * values.LERP_SPEED,
y: previous.y + (mousePos.y - previous.y) * values.LERP_SPEED,
}))
// Cut a soft circular opening through a blurred dark overlay.
const maskStyle = {
WebkitMaskImage: radialGradientMask,
maskImage: radialGradientMask,
}
// Touch follows the finger directly; mouse movement keeps inertia.
<div onMouseMove={handleMouseMove} onTouchMove={handleTouchMove} />Productized design instructions
Written after the working product was built, then organized into goal, visual language, layout, interaction, motion, accessibility, use cases, and limits.
Design a dark, cinematic interactive micro-journey product.
Product goal: help a user reset emotionally in sixty seconds by discovering a hidden landscape.
Visual language: near-black interface, thin technical grid, warm editorial typography, one adaptive acid accent, restrained analog grain.
Layout: narrative statement on the left; a large 16:9 interactive image stage on the right; compact progress and coordinate metadata; destination card revealed only after exploration.
Interaction: a soft circular light follows the pointer with inertia, cuts through a blurred dark-glass mask, records explored regions, then unlocks destination context, postcard download, and quote copy actions.
Typography: neutral grotesk for UI, high-contrast serif italic for emotional emphasis, monospaced micro-labels for system status.
Motion: slow, weighted, atmospheric; no bouncy easing and no decorative animation without feedback value.
Use cases: travel discovery, meditation, art archive, premium editorial storytelling, immersive portfolio.
Avoid: generic dashboard chrome, neon cyberpunk overload, glass cards everywhere, oversized gradients, fake metrics, excessive copy.The physical behavior
Responsive radius, weighted pointer movement, direct touch input, the feathered mask, and the soft glow remain the interaction signature.
A reason to interact
Mood choice, nine destinations, exploration progress, earned context, postcard download, quote copy, and continuation turn the effect into a product.
Rules beyond one stack
The optimized prompt separates product goal, visual grammar, layout, motion, and limits from the original React and Tailwind implementation.
04
WHEN TO USE
FIT + LIMITSUse it for
- Destination and travel discovery
- Meditation, breathing, and emotional reset tools
- Galleries, photography archives, and portfolios
- Immersive storytelling for premium brands
- Product launches that benefit from discovery
Avoid it for
- High-frequency tables and admin systems
- Utilities designed for rapid scanning
- Promotion-heavy or discount-led landing pages
- Content-heavy experiences on weak devices
- Projects without high-quality visual material
05
EVIDENCE & REUSE
STATUS + PROVENANCELIVE PRODUCTVERIFIED
RESPONSIVE BUILDPASSED
DOWNLOAD + COPYIMPLEMENTED
PROMPT STRUCTUREDOCUMENTED
BLIND PROMPT TESTPENDING
SOURCE NOTE
The original image-reveal component was supplied by the project owner and attributed to 21st.dev ↗. The exact component page should be added when available. The collection and distribution model also references 21st.dev.
REUSE BOUNDARYReuse the interaction physics, product loop, layout logic, and documented style rules. Do not treat the Lumen name, destination copy, or finished interface as a template to duplicate verbatim.