Folio

1.Concept

Folio treats the Advisor OS story as a pop-up book: four spreads that fold open as you arrive, one per product, in the order a career runs. Everything on screen is cut, tinted stock — deckled edges, fold creases, layered shadows and real hinged-plane 3D — so the tactility of paper is built from mathematics, not photographs.

The book now carries a clearly marked Part II — From the same studio: a half-title divider page, then two more spreads for Catalyst Outsourcing (managed virtual assistants) and AdLauncher (white-label Meta campaigns for agencies). They use the same paper language on their own stocks, and the copy says plainly what they are — separate offerings from the same company, no shared login, nothing bundled.

2.Palette

Six tinted paper stocks — four for the products, two for Part II — each muted to stay a family, on a warm white desk with charcoal ink. One accent only: bookbinder red, reserved for the ribbon and the CTA.

3.Type system

4.Signature element — the pop-up fold

Each spread opens with real paper mechanics: a base page lies flat on the desk (rotateX 62° in perspective), and a V-fold rises from its crease — two planes hinged at a vertical spine, driven from flat to roughly 15° off vertical by scroll, while a soft shadow stretches and fades with the fold angle. It is the signature because it makes the site's one metaphor literal: nothing slides or fades in, it folds open, the way a product should — flat facts standing up into something dimensional as you reach them.

The mechanic at rest angle: ground plane, V-fold, scroll-mapped shadow.

5.Techniques

• 3D fold choreography — CSS perspective, preserve-3d and hinged planes; the pop rotates about its bottom edge, the V-halves about the spine, all from one scroll-driven custom property --p.
• Scroll scrubbing — GSAP + ScrollTrigger tween a proxy value and write it to --p; every fold, shadow and swing-tag angle derives from it in pure CSS calc().
• Scroll-mapped shadow simulation — a radial-gradient ellipse whose height, scaleY and opacity interpolate with the fold angle, so the rising piece appears to cast light-consistent shade.
• Torn and deckled edges — many-point clip-path polygons on pop pieces and note sheets; fold creases as layered linear-gradient highlights.
• Ribbon bookmark as progress bar — a fixed swallow-tailed ribbon whose length maps document scroll; folio furniture that is also instrumentation.
• Code-built dioramas — each scene (exam-hall arch, standing calendar, funnel staircase, four-window lens card — and in Part II a team rising in rows behind a director, and a billboard over a concertina wizard strip whose folds align with the book's own spine) is inline SVG split across the two V-halves; no bitmaps anywhere.
• Reduced motion & no-JS honesty — --p defaults to 1 in CSS, so every spread rests fully open; script only ever winds it back when motion is welcome.

6.Scorecard