Engage — Avant-Garde Experiential Studio Landing Page Template

Quick summary

Immerse is a single-page, horizontal scroll landing page template built for experiential studios that work at room scale. The design leans into brutalism, raw, bold, and unapologetically direct, while layering an iridescent synthetic color system on top of void black and raw concrete gray. Visitors move sideways through a series of interactive installation panels before arriving at a blacked-out waitlist moment.

Who this template is for

This template is built for studios and creative teams operating at the intersection of art, technology, and brand experience. It speaks directly to people who need a landing page that matches the ambition of their physical work.

• Museum curators and brand directors commissioning room-scale permanent or flagship installations
• Festival programmers and press contacts searching for the next defining cultural project
• Independent designers and developers building a portfolio or agency site for experiential work

What problem this template solves

Most web design for experiential studios falls flat. A clean grid and a gallery of still images cannot communicate what it feels like to stand inside a room where every surface is a screen and every footstep triggers a response. Standard modern websites present work the same way everyone else does, which fails the studios whose work is anything but standard.

• Visitors leave without understanding the scale or sensory depth of the studio's installations
• Generic layouts fail to create tension, curiosity, or a reason to act before a launch date is announced
• High-intent decision-makers, curators, brand directors, need something that earns their attention at first glance

What you get with this template

You get a fully structured horizontal scroll landing page built around five major interactive panels and a conversion-focused waitlist section. Every element is coded and styled. No placeholder blocks or generic filler.

• A cursor-reactive hero with a viewport-filling brutalist headline that shimmers with an iridescent gradient as the cursor moves
• Three interactive installation panels, Frequency Bath, Chromatic Collapse, and Signal Bloom, each with a distinct interaction mechanic
• A blacked-out waitlist panel with a live sign-up counter, a role-selection dropdown, and a molten pink "Be Inside First" call to action

Feature list

This template is built around a set of deliberate, high-impact features drawn directly from the studio brief. Each one serves a specific purpose in the user journey.

Cursor-Reactive Iridescent Headline

The hero section opens with a giant, three-word brutalist headline set at viewport-filling scale. The type shifts hue as the cursor moves, using an oil-on-surface iridescent gradient effect. A single animated line below the headline moves leftward to teach visitors that the page scrolls horizontally. No image, no video, just stark typography and raw light.

Horizontal Scroll Panel Architecture

The page layout is built as a hallway of horizontal panels. Each panel is a room visitors partially enter. The structure builds tension deliberately: each installation is presented as more elaborate than the last, and the final panel is intentionally hidden. This unconventional layout breaks the standard vertical web design convention and keeps users engaged panel by panel.

Interactive Installation Panels

Three named installation panels anchor the experience. Frequency Bath includes a 360-degree draggable capture visitors can rotate. Chromatic Collapse triggers ambient visual and audio simulation on hover. Signal Bloom uses a click-to-peel mechanic that reveals the technical rig beneath the finished installation. These interaction layers let visitors actively explore rather than passively scroll.

Blacked-Out Waitlist Section

The final panel is pure void black. No launch date, no preview. A live waitlist counter updates in real time, manufacturing scarcity from social proof. Visitors submit their email and select their role from a dropdown, curator, brand director, press, artist, or curious human. The "Be Inside First" call to action fires in molten pink, rare enough to feel urgent.

AI Iridescent Color System

The color system is built on five precise values: void black (#0B0B0F) dominates every background. Raw concrete gray (#3A3A3C) handles body text and structural dividers. Shifting holographic violet (#9D4EDD) and electric iridescent cyan (#00F5D4) alternate on hover states and transition animations between panels. Molten signal pink (#FF2E63) appears only on calls to action and interactive hotspots, making every appearance feel like a signal pulse.

Brutalist Typography System

Headlines use Manrope at ultra-heavy weight, kerned so tight the letters nearly collide. Technical labels throughout the panels use JetBrains Mono, which reinforces the industrial and architectural character of the design. System fonts are used strategically to keep the raw, unrefined feel consistent across every page state.

Page sections overview

Design & branding system

The design system is built to feel like brutalist architecture translated into light. Every color, typeface, and interaction rule exists to create a coherent sensory identity that carries the raw power of the studio's physical installations into the browser.

• Void black (#0B0B0F) as the dominant background across all panels; pure black is the canvas, never a secondary element
• Violet and cyan used only as accent gradients on hover and transition states; pink reserved exclusively for calls to action
• Ultra-heavy Manrope headlines paired with JetBrains Mono labels; system fonts used for structural body text in technical readout zones

Mobile & speed optimization

This template is designed desktop-first. The horizontal scroll experience requires a wide viewport to function as intended. A vertical mobile fallback is included to ensure the content remains accessible on smaller screens without breaking the visual structure.

• GPU-accelerated transforms power all cursor-reactive gradients and panel transitions; no layout-triggering repaints
• IntersectionObserver and request animation frame (RAF) techniques handle scroll-linked panel activation and cursor tracking efficiently
• Mobile fallback converts horizontal panels to a vertical stack while preserving the iridescent color system and bold type hierarchy

How this template helps you convert

This landing page is structured around a single conversion goal: waitlist sign-up. Everything from the hero to the final blacked-out panel is sequenced to build desire before asking for anything.

1. The hero establishes authority instantly. A brutalist headline at full viewport scale makes a bold statement without explanation. Visitors know they are looking at something different from the first glance, which earns continued attention.
2. The three interactive panels escalate curiosity. Each installation panel gives visitors something to do, drag, hover, click, which transforms passive scrolling into active exploration. By the time visitors reach the final panel, they are already inside the experience.
3. The void waitlist panel converts through mystery and social proof. The live counter makes the waitlist feel real and growing. The role dropdown captures intent without friction. The absence of a launch date makes signing up feel like the only way to find out what comes next.

Other information about this template

This template carries a strong connection to the broader history and current momentum of brutalism in web design. Understanding that context helps designers and developers get the most out of what it offers.

• Brutalism in web design emphasizes raw, unpolished aesthetics and honest structure over conventional beauty; this template embraces that philosophy while pushing it into iridescent, synthetic territory
• Well-known design examples of brutalist web design include sites associated with Studio Brot, Balenciaga, and Bloomberg Businessweek, each a great example of bold typography and high contrast in a professional context
• Brutalist websites are characterized by a rejection of polished grids and symmetry; this template applies those ideas to a portfolio and agency context where standing out is a competitive advantage
• The brutalist appearance here is intentional, not accidental; what might read as ugly by conventional web design standards is a deliberate creative and strategic choice
• Template supports customization across all color values, typeface weights, and panel content without requiring advanced design skills or raw HTML editing beyond standard code adjustments
• Brutalist art and brutalist aesthetics have a long legacy in physical architecture; this template draws inspiration from that tradition and applies it to web with the same commitment to raw power and visible structure
• The template can serve as a personal website or a creative agency showcase, depending on how the installation panels and waitlist copy are adapted to the studio's own project history
• Designers and developers building for immersive experience studios will find the code structure clean and logically organized, making it straightforward to extend or adapt existing pages

Show more