Itz Confidential
A noir-themed interactive detective experience powered by scroll-linked storytelling.
The Challenge
Event and experience websites are usually static brochures and grids of images and a "Contact Us" form. For a mystery/detective experience brand, a standard landing page felt disconnected from the product itself. The user needed to feel like a detective from the moment they landed on the site, not just a customer.
The Solution
We turned the website into a "Digital Evidence Board." The Narrative Navigation: Instead of a traditional navbar, we built the "Red Thread" system. A continuous red string connects every section of the page physically. As the user scrolls, the thread "draws" itself, guiding the eye from one clue (section) to the next, mimicking how detectives connect evidence on a wall. Gamified Conversion: We replaced the standard inquiry form with a "Logic Gate." Users can't just submit a form; they have to "solve" a mini-case using Regex-validated inputs to unlock the contact button.
The "Red Thread" Engine
A custom SVG path that animates its stroke-dashoffset based on the user's scroll position. It seamlessly connects 6 distinct "Case Files" (sections) into one continuous journey.
Infinite Media Rail
An auto-scrolling horizontal loop for the "Corporate Events" section, capable of mixing vertical Instagram Reels and horizontal event photos without breaking layout.
Logic-Gated Forms
A custom input validation system where the "Submit" button remains locked until the user enters the correct "Suspect Name" (validated via Regex), turning a boring form into a final boss battle.
The Process
We treated the browser viewport as a camera lens and the scroll bar as a timeline.
- Storyboarding the Scroll: Unlike a normal site where sections are independent, we scripted the page linearly. We decided that Section 1 (The Hook) had to physically connect to Section 2 (The Suspects) via a visual tether to prevent users from bouncing.
- The "Red Thread" Physics: We prototyped the SVG line behavior in Figma first, then moved to Framer Motion. The challenge was making the thread feel "loose" and organic, not robotic. We added a slight delay (spring physics) to the drawing animation so it felt like someone was physically pinning string to a wall as you scrolled.
- Breaking the Grid: To sell the "Noir" aesthetic, we realized a perfect CSS grid looked too fake. We deliberately introduced "Chaos Theory" into the layout rotating image cards by random values between
-2degand2degand adding paper texture overlays to make the screen look like a messy detective's desk.
Interface Gallery
