` elements with complex `border-radius` values that make them look like squeezed water balloons. No rectangles anywhere. Every content block is an irregular rounded form: `border-radius: 40% 60% 55% 45% / 55% 40% 60% 45%`. These containers have a subtle `backdrop-filter: blur(8px)` and semi-transparent neon-tinted backgrounds, giving them a frosted-inflatable appearance. - **Foreground Layer (z: +1):** Small floating accent blobs -- tiny neon circles (12-24px) and warped ellipses that drift across the viewport like slow-moving spores or fireflies. These are CSS-only elements using `animation` with cubic-bezier timing functions that create organic, wobbly drift paths. **Spatial Flow:** Content does not follow a grid. Instead, blob containers are positioned using CSS Grid with `grid-template-areas` that create an organic, asymmetric arrangement -- no two sections share the same spatial footprint. The vertical rhythm is generous: 12-16vh gaps between content blobs, creating a sense of floating isolation. Navigation is a cluster of small blob-buttons fixed to the bottom-left corner, each one a different neon color, wobbling gently in a perpetual idle animation. ## Typography and Palette **Typography:** - **Headlines / Display:** "Bungee Shade" (Google Fonts) -- a chromatic, layered display face with built-in inline shadow effects that evoke neon signage and retro arcade marquees. Used at 4rem-8rem for the hero domain name and section headers. The built-in layering of Bungee Shade creates a three-dimensional, extruded letterform that pairs naturally with the inflated blobitecture forms. Set with `letter-spacing: 0.06em` and `text-transform: uppercase`. Color: #FF006E (Neon Rose) with a CSS `text-shadow` of `0 0 40px rgba(255,0,110,0.6), 0 0 80px rgba(255,0,110,0.3)` to create a neon glow halo. - **Sub-headlines:** "Bungee" (Google Fonts) -- the non-layered companion to Bungee Shade, used at 1.5rem-2.5rem for secondary headings. Weight: 400 (Regular). Color: #00F5D4 (Electric Mint). These serve as the "indoor lighting" counterpart to the Shade variant's "outdoor neon sign" personality. - **Body Text:** "Outfit" (Google Fonts) -- a geometric sans-serif with a friendly, rounded character that echoes the soft blob forms without being overtly playful. Weight: 300 (Light) for body copy at 1.05rem, 500 (Medium) for emphasized passages. `line-height: 1.75` for generous breathing room. Color: #E0E0FF (Lavender Mist) on dark backgrounds. `letter-spacing: 0.01em`. - **Accent / Labels:** "Space Mono" (Google Fonts) -- a monospace face used sparingly for small labels, tags, and metadata text at 0.75rem-0.85rem. Weight: 400. Color: #B8B8D0 (Pale Indigo). This provides a grounding, technical counterpoint to the exuberant display typography. **Palette:** The palette is **neon-electric** -- saturated, luminous colors that appear to emit light against the near-black background, creating the sensation of a glowing interface suspended in darkness. | Role | Color | Hex | Usage | |------|-------|-----|-------| | Primary Neon | Neon Rose | #FF006E | Headlines, primary blob accents, hover states | | Secondary Neon | Electric Mint | #00F5D4 | Sub-headlines, secondary blobs, link highlights | | Tertiary Neon | Ultraviolet | #7B2FFF | Decorative mid-layer blobs, gradient endpoints | | Accent Neon | Hot Cyan | #00D4FF | Small floating accent elements, button glow | | Background Deep | Ultra Violet Black | #0A0014 | Page background, deepest layer | | Background Mid | Midnight Grape | #1A0A2E | Mid-depth gradient zones, container tints | | Text Primary | Lavender Mist | #E0E0FF | Body copy, readable content | | Text Secondary | Pale Indigo | #B8B8D0 | Labels, metadata, subdued text | **Gradient Recipes:** - Hero glow: `radial-gradient(ellipse at 30% 40%, rgba(255,0,110,0.25) 0%, transparent 60%), radial-gradient(ellipse at 70% 60%, rgba(0,245,212,0.2) 0%, transparent 55%)` - Blob fill: `linear-gradient(135deg, rgba(123,47,255,0.3) 0%, rgba(0,212,255,0.15) 100%)` - Glitch accent: a rapid 3-frame CSS animation alternating between #FF006E, #00F5D4, and #7B2FFF at 0.1s intervals ## Imagery and Motifs **Glitch-Art as Textural Disruption:** The primary imagery mode is **glitch-art** -- not used as background wallpaper or decorative illustration, but as an active, dynamic process that intermittently disrupts the blobitecture's smooth perfection. The glitch is the antagonist to the blob's protagonist: where the blob is soft, continuous, and organic, the glitch is jagged, fragmented, and digital. Their interplay creates the site's central visual tension. **Glitch Techniques (CSS-only, no images):** 1. **RGB Channel Split:** On hover or at timed intervals (every 8-12 seconds), content elements briefly (0.15s) display three offset copies of themselves in red (#FF006E), green (#00F5D4), and blue (#00D4FF) using CSS `box-shadow` with x-offsets of -3px, 0, and +3px respectively. The effect triggers via `@keyframes` with a `step-end` timing function for that instantaneous, broken-signal feel. 2. **Scan-Line Overlay:** A pseudo-element (`::after`) on the `` renders a repeating-linear-gradient of 1px transparent / 1px rgba(0,0,0,0.08) lines across the entire viewport, creating a subtle CRT scan-line texture. This is always present but barely perceptible -- a constant low-level reminder that the surface is a screen, not a physical object. 3. **Data-Mosh Blocks:** Decorative `

` elements scattered between content sections that render as horizontal bands (100% width, 3-8px height) of random neon colors, appearing and disappearing in rapid 0.05s flashes. These simulate the horizontal tearing artifacts of corrupted video playback. Implemented with CSS `animation` using `steps(1)` and randomized `animation-delay` values. 4. **Pixel Displacement:** On certain text elements, a CSS `clip-path` animation briefly (0.1s) shifts horizontal slices of the text by 2-6px left or right, creating the classic glitch-text effect. This fires on the hero headline every 6 seconds and on section headers when they enter the viewport. **Motif: Flowing Curves:** Every structural element -- containers, dividers, navigation buttons, decorative shapes -- uses curved, organic outlines. There are zero straight lines in the entire design (except the scan-line overlay, which is the deliberate exception that proves the rule). Section dividers are SVG `` elements with cubic Bezier curves that create undulating wave boundaries between content zones. The curves flow predominantly left-to-right, creating a sense of horizontal momentum even though the page scrolls vertically. **Floating Blob Particles:** 20-30 small CSS circles (8-20px diameter) with neon fills and `filter: blur(2px)` drift across the viewport on looping `@keyframes` animations. Each particle has a unique animation-duration (15-40s), a unique sinusoidal path (achieved via combined `translateX` and `translateY` keyframes with different timing), and a pulsing opacity oscillation. They create a living, breathing atmosphere -- like neon plankton suspended in dark water. ## Prompts for Implementation **Full-Screen Narrative Experience:** The site opens with a 1.5-second reveal sequence: the Ultra Violet Black (#0A0014) background fades in first, then the background gradient meshes bloom outward from the center like ink drops in water (CSS `scale` animation from 0 to 1 with `ease-out` over 1s). Then the hero blob container inflates into view -- starting as a tiny circle at the center of the viewport and expanding to its full irregular blob shape over 0.8s with an `elastic` easing curve (CSS `cubic-bezier(0.68, -0.55, 0.27, 1.55)`). The domain name "undo.quest" types itself inside the blob using a stepped `@keyframes` animation on `width` (the typewriter approach), each character appearing in Bungee Shade with the neon glow intensifying as each letter lands. **Elastic Animation System:** All animations use **elastic** easing -- the signature motion pattern. Elements overshoot their target position and bounce back before settling, mimicking the physics of rubber and jelly. The primary easing function is `cubic-bezier(0.68, -0.55, 0.27, 1.55)` for entrances and `cubic-bezier(0.34, 1.56, 0.64, 1)` for exits. When content blobs enter the viewport (detected via `IntersectionObserver`), they scale from 0.7 to 1.0 with elastic easing over 0.6s and simultaneously fade from 0 to 1 opacity over 0.4s. The overshoot creates a momentary inflation-beyond-target that reinforces the blobitecture's pneumatic character. **Scroll Behavior:** Scrolling is the primary interaction. As the user scrolls: - Background gradient meshes shift position at 0.3x scroll speed (subtle parallax without being the dominant pattern) - Mid-layer decorative blobs shift at 0.6x scroll speed - Content blobs remain at 1x (normal) scroll speed - Foreground particle elements shift at 1.2x scroll speed (reverse parallax -- they move slightly faster than content, creating a sense of floating above) - Every 3rd content section, a "glitch event" fires: the entire viewport briefly (0.2s) shifts 4px to the right and back, the scan-line overlay intensity doubles, and three data-mosh bars flash across the screen. This creates rhythmic visual punctuation in the scrolling experience. **Interactive Blob Buttons:** Navigation and interactive elements are blob-shaped buttons that respond to hover with an elastic squish animation: `transform: scale(1.1, 0.9)` transitioning to `scale(1, 1)` with elastic easing over 0.3s. On press (`:active`), they compress further: `scale(0.85, 1.1)`. Each button has a neon border that glows brighter on hover (`box-shadow` intensity increases from 0.3 to 0.7 alpha). The cursor should change to a custom SVG cursor -- a small blob shape -- when hovering over interactive elements. **The "Undo" Interaction:** A signature interaction unique to this site: somewhere on the page, a prominent blob-button labeled "UNDO" in Bungee Shade. When clicked, the most recent scroll-triggered animation on the page reverses -- elements that have entered the viewport elastically bounce back out, the last glitch event replays in reverse, and the gradient meshes shift backward. After 2 seconds, everything snaps back to its current state with a final glitch burst. This is the site's easter egg and conceptual anchor: the act of undoing, made tangible and delightful. **Content Sections (narrative flow):** 1. **Hero Blob** -- Full-viewport inflated container with "undo.quest" in neon Bungee Shade, floating above drifting gradient meshes. No tagline, no subtitle -- just the name, glowing, and a single downward-pointing blob-arrow that bounces with elastic easing. 2. **The Concept Blob** -- An asymmetric blob container positioned off-center-left, containing 2-3 sentences about what "undo" means as a philosophy. Text in Outfit Light. A small glitch-art disruption tears across the text mid-sentence, then repairs itself. 3. **The Gallery of Reversals** -- Three medium blob containers arranged in a loose triangular cluster, each containing a different visual vignette: one shows a CSS animation playing forward and backward in a loop, one shows text being typed and untyped, one shows a color gradient cycling and reversing. No images -- pure CSS visual poetry. 4. **The Void** -- A full-viewport section of pure #0A0014 with only the floating neon particles visible. A moment of visual rest. As the user scrolls through it, the particles accelerate and multiply before thinning out again at the bottom edge. A single line of text in Bungee appears at the center: "WHAT WOULD YOU UNDO?" 5. **The Closing Blob** -- A final inflated container with the UNDO button and a minimal set of links rendered as small blob-pills. The background gradients intensify to their brightest values. The scan-line overlay becomes more visible. The page ends not with a footer but with the blobs slowly deflating (scaling down to 0.95 and fading to 90% opacity) as the user reaches the absolute bottom -- as if the page itself is being undone. **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, testimonial carousels, feature comparison tables, hero images with stock photography, hamburger menus, conventional header/footer patterns, rectangular cards with drop shadows, Bootstrap-style column grids. ## Uniqueness Notes **Differentiators from other designs:** 1. **Zero Straight Lines Policy:** No other design in the portfolio enforces a strict no-straight-lines rule. Every container, divider, button, and decorative element uses organic curved forms (complex `border-radius`, SVG Bezier paths). The only straight lines are the scan-line overlay, which exists precisely as a deliberate contrast -- the digital grid fighting against the organic blob world. This creates a visual language that is unmistakably distinct from any grid-based or card-based layout. 2. **Glitch-as-Narrative-Device:** While glitch effects appear in ~4% of designs (typically as static decoration), undo.quest uses glitch as an active storytelling mechanism -- the glitch events are timed, rhythmic, and responsive to scroll position, creating a narrative arc of digital disruption and restoration that mirrors the "undo" concept. The glitch is not a texture; it is a character in the story. 3. **Elastic Physics Language:** The elastic easing system (cubic-bezier(0.68, -0.55, 0.27, 1.55)) is applied universally -- every animation, every hover, every entrance uses the same overshoot-and-settle physics. This creates a cohesive kinetic identity where the entire site feels like it is made of a single, consistent physical material (rubber/jello). No other design in the portfolio establishes this level of animation consistency around a single easing curve. 4. **The "Undo" Easter Egg:** A functional reverse-animation button that literally undoes the most recent visual state change on the page. This transforms the domain name from a label into an interactive experience -- the site does what it says it is. No other design features a mechanic where user interaction reverses the site's own animations. 5. **Blobitecture at 0% Frequency:** This is the first design in the entire portfolio to use the blobitecture aesthetic. Combined with neon-electric palette (2%), retro-display typography (1%), and flowing-curves motifs (3%), the seed combination exists at the extreme low-frequency edge of the design vocabulary, ensuring maximum visual differentiation from every other site. **Chosen Seed:** aesthetic: blobitecture, layout: layered-depth, typography: retro-display, palette: neon-electric, patterns: elastic, imagery: glitch-art, motifs: flowing-curves, tone: whimsical-creative **Avoided Overused Patterns:** playful aesthetic (95%), centered layout (99%), friendly tone (99%), mono typography (99%), warm palette (100%), scroll-triggered as primary pattern (97%), minimal imagery (95%), photography imagery (72%), vintage motifs (89%), parallax as primary pattern (73%). None of these appear as dominant categories in this design.