A Scroll-Driven Experience for Complex Regulatory Software

A Scroll-Driven Experience for Complex Regulatory Software

Created a scroll-driven Wix Studio experience that uses meaningful motion, layered illustration and interaction to make complex regulatory software easier to understand.

About The Project

The Chimera Project is a regulatory-software platform designed to bring fragmented planning, zoning and building-code information into one live database. The product combines multiple regulatory sources and provides an AI assistant capable of answering property-specific questions, giving architects, engineers and developers a more direct way to understand complex development requirements.

That product creates an unusual marketing challenge because its value is difficult to communicate through conventional website copy. The platform deals with municipal codes, building and safety information, zoning maps, environmental review, GIS data and multiple building standards. Simply listing these systems as features would explain what exists but would not clearly demonstrate why bringing them together matters.

The website therefore uses interaction as part of the explanation. Built entirely in Wix Studio, the experience turns the product story into a sequence controlled by the visitor’s scroll. Warm paper textures, orange highlighter strokes, black label tape, file folders and isometric illustrations give the interface a tactile, human character that contrasts with the complexity of the subject. Regulatory sources visually stack into a unified system, statistics count upward to communicate scale, archive content opens through a folder metaphor and an interactive map demonstrates geographic expansion. Most motion is handled natively in Wix Studio, with targeted Velo code and embedded components used where additional functionality is required.

Built in 2026

Comapny

One Chimera (The Chimera Project)

Platform

Shopify

Service Provided

Scroll Animation • Interaction Design • Velo Code

Live Preview

https://thechimeraproject.com

Problem

The primary challenge was explaining an extremely complex product without making the website feel as bureaucratic as the subject matter itself. Chimera combines many overlapping rule sets and information sources, including municipal codes, zoning systems, building regulations, environmental review and GIS data. Visitors needed to understand the core idea—many fragmented sources becoming one live regulatory system—within only a few seconds of scrolling.

The product also needed to feel tangible. A static list of software features would not demonstrate the address search, AI answers, regulatory relationships or data scale effectively enough. The visitor needed to experience those concepts visually before being asked to sign up or evaluate a plan.

At the same time, the brand deliberately uses analogue references such as paper, tape, highlighter marks and folders to make regulation feel more approachable and less institutional. Heavy interaction therefore had to preserve that visual language while still remaining usable and responsive. Animation could not exist simply for decoration; every major effect needed to communicate meaning, respond naturally to scrolling and maintain orientation across a long single-page marketing journey.

Complex Product Story

Multiple regulatory data sources needed to become understandable as one unified system within only a few seconds.

Cold Technical Subject

The brand needed to make complex regulation feel approachable, human and visually engaging rather than bureaucratic.

Motion Without Friction

Heavy interaction needed to support understanding while remaining responsive, usable and purposeful throughout the experience.

Solution

Selling a product that doesn't exist yet on shelves meant the website itself had to carry the entire weight of belief. Communicating AR concepts, AI integration, and 3D visualization without overwhelming visitors was a delicate balance. The page needed cinematic impact while still guiding users smoothly toward a pre-order decision.Selling a product that doesn't exist yet on shelves meant the website itself had to carry the entire weight of belief. Communicating AR concepts, AI integration, and 3D visualization without overwhelming visitors was a delicate balance. The page needed cinematic impact while still guiding users smoothly toward a pre-order decision.

Scroll-Led Storytelling

Important sequences respond directly to scroll, allowing visitors to control the pace of complex product explanations.

Unified Visual Language

Paper, tape, highlighter and folder elements create one consistent visual system from hero to footer.

Native-First Interaction

Wix Studio handles most motion while Velo and embedded components cover specialist functionality only where required.

Implementation

Implementation was organised as a series of independent interaction systems rather than one continuous animation. Headlines, highlighter strokes, question bubbles, regulatory labels, paper cards, folders and isometric illustrations were built as separate layers so their movement and timing could be controlled individually.

The hero combines a typing effect, highlighter marks and live Q&A behaviour to introduce the product concept immediately. Scroll-linked highlights and rule animations continue that visual language into later sections, while Velo-driven count-up statistics communicate data scale through motion.

The signature regulatory-stack sequence uses a sticky section that keeps the illustration fixed while the visitor scrolls. Individual slabs representing sources such as LADBS, LAMC, ZIMAS, California and international building codes, CEQA and GIS move into position one by one until they form a unified tower. Scrolling back reverses the sequence, allowing the visitor to control both assembly and separation.

Other sections use alternating entrance reveals, parallax-style movement, pricing interactions, folder reveals and staggered team portraits. Embedded interactive components support the address-search interface and geographic map, while Lottie was used for the earlier location-pin behaviour.

Performance was also considered in the implementation. Key animated objects such as stacks, folders and cards are separate still-image layers moved through interaction rather than being delivered as large video files. Wix media delivery handles image optimisation, while run-once counters and highlights avoid constant looping. This keeps most of the website editable through Wix Studio while reserving custom code only for behaviour the editor cannot handle directly.

The Result

The completed experience contains 12 distinct animation and interaction effects across seven primary content sections, from the initial introduction through product features, plans, community, team and geographic expansion. The documented screen recording runs for 2 minutes and 56 seconds and covers both the live page and an earlier /home concept.

A visitor who only scrolls through the website can still understand the central product story. The AI assistant visibly answers a regulatory question, individual rule sets stack into one unified system, statistics count upward to communicate the scale of the underlying data, archive access is revealed through the filing metaphor and the geographic map communicates current and future territory.

The implementation also uses performance-conscious techniques, including layered still-image assets, optimized Wix media delivery and effects that trigger only when needed rather than looping continuously. No analytics or conversion figures were available, so performance claims are not made. The documented result is a complete interaction system where motion actively explains the product instead of functioning as decoration.