# PALLET ROSS — SCROLL-DRIVEN ARTIST MARKETPLACE LANDING PAGE

BUILD A SINGLE-PAGE SCROLL-DRIVEN LANDING PAGE FOR AN ARTIST MARKETPLACE CALLED PALLET ROSS. USE REACT WITH VITE, TYPESCRIPT, TAILWIND CSS, FRAMER MOTION, AND LUCIDE-REACT ICONS. LOAD THE GOOGLE FONT INTER TIGHT (WEIGHTS 300 TO 900) AND CONFIGURE TAILWIND SO FONT-HEADING, FONT-BODY, AND FONT-SANS ALL MAP TO "INTER TIGHT", SANS-SERIF. THE PAGE IS ONE VERTICAL SCROLL SURFACE WITH THREE FULL-HEIGHT SECTIONS STACKED INSIDE A SINGLE CONTAINER REF. THE GLOBAL PAGE BACKGROUND IS THE OFF-WHITE COLOR #F2F2F0 APPLIED TO THE OUTERMOST CONTAINER.

BEHIND EVERYTHING, RENDER A FIXED FULL-VIEWPORT LAYER AT Z-INDEX 0 THAT HOLDS THREE SOFT RADIAL-GRADIENT BLUR BLOBS AS DECORATION. FIRST BLOB: TOP 5%, LEFT 8%, 300X300, RADIAL-GRADIENT CIRCLE FROM RGBA(180,180,180,0.12) AT 0% TO TRANSPARENT AT 70%, BLUR 40PX. SECOND BLOB: TOP 8%, RIGHT 10%, 250X250, SAME GRADIENT AND BLUR. THIRD BLOB: TOP 30%, LEFT 50% TRANSLATEX -50%, 600X400, RADIAL-GRADIENT CIRCLE FROM RGBA(160,160,160,0.08) TO TRANSPARENT AT 70%, BLUR 60PX. THESE BLOBS ARE POINTER-EVENTS NONE.

FIXED TOP NAVBAR AT Z-INDEX 50, TRANSPARENT BACKGROUND, PADDING 18PX 32PX, FULL WIDTH, THREE GROUPS IN A FLEX SPACE-BETWEEN ROW. LEFT GROUP: SMALL LOGO PLUS THE WORDMARK "PALLET ROSS". THE LOGO IS A 28X28 SVG COMPOSED OF TWO OVERLAPPING DIAMOND/PARALLELOGRAM SHAPES FILLED WITH #4ECDC4 (THE BACK SHAPE AT FULL OPACITY, THE FRONT SHAPE AT 0.85 OPACITY, SLIGHTLY OFFSET DOWN AND RIGHT TO SUGGEST LAYERED PALETTES). WORDMARK USES FONT-HEADING, 18PX, WEIGHT 600, COLOR #111111, WITH 10PX GAP FROM THE LOGO. CENTER GROUP IS A ROW OF SMALL TEXT BUTTONS IN FONT-HEADING 14PX, COLOR #111111, PADDING 14PX HORIZONTAL 8PX VERTICAL, NO BACKGROUND, CURSOR POINTER: "GET STARTED", THEN A SPECIAL BUTTON LABELED "CREATE STRATEGY" PREFIXED WITH A 14PX SOLID #4ECDC4 CIRCLE (6PX RIGHT MARGIN), THEN "PRICING", "CONTACT", "SOLUTION", "E-COMMERCE". RIGHT GROUP: TWO ICON BUTTONS, LUCIDE USER AND LUCIDE SETTINGS, BOTH 20PX, COLOR #111, PADDING 8PX, TRANSPARENT BACKGROUND.

FIXED SCROLL INDICATOR AT RIGHT 24PX, VERTICALLY CENTERED, Z-INDEX 40. IT IS A VERTICAL COLUMN OF TWO 36X36 BUTTONS WITH 1.5PX SOLID RGBA(0,0,0,0.15) BORDER, BORDER-RADIUS 8PX, TRANSPARENT BACKGROUND, LUCIDE CHEVRONUP AND CHEVRONDOWN ICONS AT 16PX COLOR #111. CLICKING UP SCROLLS THE WINDOW BY MINUS ONE VIEWPORT HEIGHT WITH SMOOTH BEHAVIOR, CLICKING DOWN SCROLLS BY PLUS ONE VIEWPORT HEIGHT. HOVER TINTS THE BACKGROUND TO RGBA(0,0,0,0.05).

ABOVE ALL SECTIONS SITS A GLOBAL SCROLLCARDS OVERLAY COMPONENT THAT OWNS THE SEVEN ARTWORK CARDS ACROSS THE ENTIRE PAGE. IT USES FRAMER-MOTION'S USESCROLL BOUND TO THE PAGE CONTAINER REF WITH OFFSET START START TO END END, AND TRACKS THE SCROLLYPROGRESS MOTION VALUE. IT ALSO MEASURES, ON MOUNT AND ON RESIZE PLUS A 300MS TIMEOUT FOR LAYOUT SETTLE, THE DOCUMENT POSITION OF THE SECTION WITH DATA-SECTION="TWO": IT COMPUTES CONTAINERTOP, CONTAINERSCROLLHEIGHT MINUS INNERHEIGHT AS THE SCROLLABLE HEIGHT, SECTIONTWOTOP, THEN DERIVES LOCKPROGRESS = CLAMP((SECTIONTWOTOP MINUS CONTAINERTOP) DIVIDED BY SCROLLABLEHEIGHT, 0.05, 0.99). IT ALSO STORES SECTIONTWOTOP AND SECTION HEIGHT FOR ANCHORING.

THE SEVEN CARDS USE IMAGES /CARD-1.PNG THROUGH /CARD-7.PNG LOADED FROM THE PUBLIC FOLDER (SOURCED ORIGINALLY FROM QCLAY.DESIGN/LOVABLE/PALLET/CARD-1.PNG THROUGH CARD-7.PNG). EVERY CARD IS A SQUARE, WIDTH AND HEIGHT 220PX, BORDER-RADIUS 18PX, OVERFLOW HIDDEN, BOX-SHADOW 0 20PX 60PX RGBA(0,0,0,0.20), WITH AN INNER IMG TAG THAT FILLS 100 PERCENT WIDTH AND HEIGHT WITH OBJECT-FIT COVER AND DRAGGABLE FALSE. CARD DRAW ORDER IN SECTION 2 IS CONTROLLED BY THE CASCADE Z-INDEX (7 DOWN TO 1, LEFTMOST ON TOP), AND ANY HOVERED CARD JUMPS TO Z-INDEX 30.

THERE ARE TWO VISUAL STATES FOR THE CARD OVERLAY: AN INTRO ANIMATION IN SECTION 1 (SCROLL PROGRESS APPROXIMATELY 0) AND A SCROLL-LINKED STATE ONCE THE INTRO COMPLETES. WHILE INTRO PLAYS, RENDER A NON-INTERACTIVE FIXED FULL-VIEWPORT DIV AT Z-INDEX 5. INSIDE IT RENDER SLOT INDICES 1 TO 6 EACH AS A MOTION.DIV POSITIONED ABSOLUTELY AT TOP 0 LEFT 0 WITH TRANSLATEX -50% TRANSLATEY -50% SO X AND Y VALUES DESCRIBE THE CARD CENTER. EACH OF THESE CARDS ANIMATES FROM INITIAL OPACITY 0 TO OPACITY 1 WITH NO MOVEMENT ON X, Y, ROTATE, OR SCALE (THEIR TARGET EQUALS THE SECTION 1 FAN SLOT). THE FAN LAYOUT, ALL VALUES RELATIVE TO THE VIEWPORT CENTER ON X AND TO A FIXED HERO_ROW_Y OF 522PX ON Y, IS:

SLOT 0 X -480 Y 18 ROTATE -18 SCALE 0.88 Z 1, SLOT 1 X -310 Y 6 ROTATE -10 SCALE 0.92 Z 2, SLOT 2 X -155 Y -2 ROTATE -4 SCALE 0.96 Z 3, SLOT 3 X 0 Y -8 ROTATE 0 SCALE 1 Z 4, SLOT 4 X 160 Y -2 ROTATE 5 SCALE 0.96 Z 3, SLOT 5 X 320 Y 6 ROTATE 12 SCALE 0.92 Z 2, SLOT 6 X 480 Y 18 ROTATE 20 SCALE 0.88 Z 1.

CARD 1 IS THE LEAD CARD AND GETS A THREE-PHASE CHOREOGRAPHED ENTRANCE:

```ts
CONST INTRODELAY = 0.8;
CONST INTRODURATION = 0.72;       // RISE FROM BELOW CENTER TO VIEWPORT CENTER
CONST TRAVELTORIGHTDURATION = 0.6; // FLY TO SLOT 6 (RIGHTMOST)
CONST SWEEPLEFTDURATION = 1.6;     // SWEEP ACROSS TO SLOT 0 (LEFTMOST)
CONST TOTALDURATION = INTRODURATION + TRAVELTORIGHTDURATION + SWEEPLEFTDURATION;
// MOTION.DIV ANIMATE KEYFRAMES:
X: [VP.W/2, VP.W/2, VP.W/2 + SLOT6.X, VP.W/2 + SLOT0.X],
Y: [VP.H/2 + 180, HERO_ROW_Y, HERO_ROW_Y + SLOT6.Y, HERO_ROW_Y + SLOT0.Y],
ROTATE: [0, 0, SLOT6.ROTATE, SLOT0.ROTATE],
SCALE:  [0.3, 1, SLOT6.SCALE, SLOT0.SCALE],
OPACITY:[0, 1, 1, 1],
TIMES:  [0, INTRODURATION/TOTALDURATION, (INTRODURATION+TRAVELTORIGHTDURATION)/TOTALDURATION, 1],
EASE:   [SMOOTHEASE, SMOOTHEASE, SMOOTHEASE], // SMOOTHEASE = [0.22, 1, 0.36, 1]
```

WHILE CARD 1 IS SWEEPING LEFT ACROSS SLOTS 6 TO 0, THE REMAINING 6 CARDS REVEAL ONE BY ONE EXACTLY WHEN CARD 1 VISUALLY PASSES THEM. THE REVEAL TIME PER SLOT IS COMPUTED BY INVERTING THE SMOOTHEASE BEZIER CURVE: FOR EACH SLOT I IN 1..6, PROGRESS = (SLOT[I].X - SLOT[6].X) / (SLOT[0].X - SLOT[6].X), REVEALTIME = GETTIMEFORPROGRESS(PROGRESS, SMOOTHEASE), AND REVEALDELAY = SWEEPSTART + REVEALTIME * SWEEPLEFTDURATION WHERE SWEEPSTART = INTRODELAY + INTRODURATION + TRAVELTORIGHTDURATION. REVEAL DURATION IS 0.06S FOR SLOTS 1, 2, 3 AND 0.18S FOR SLOTS 4, 5, 6, EASE EASEOUT. AFTER A CARD FINISHES REVEALING, MARK IT AS REVEALED SO ANY LATER RE-RENDER USES A QUICK 0.25S HOVEREASE TRANSITION (HOVEREASE = [0.34, 1.56, 0.64, 1]) INSTEAD OF REPLAYING THE LONG DELAY.

WHEN THE LEAD CARD'S ONANIMATIONCOMPLETE FIRES, SET INTRODONE TRUE AND SWITCH THE OVERLAY TO SCROLL-LINKED MODE. IN SCROLL-LINKED MODE THE WRAPPER CHANGES BETWEEN TWO CSS POSITIONS BUT THE SEVEN INNER CARD COMPONENTS STAY CONTINUOUSLY MOUNTED WITH STABLE KEYS SO REACT NEVER REMOUNTS THEM (THIS PREVENTS THE VISIBLE RESET WHEN CROSSING INTO SECTION 2):

```ts
CONST ISLOCKED = CURRENTPROGRESS >= LOCKPROGRESS;
CONST WRAPPERSTYLE = ISLOCKED
  ? { POSITION: "ABSOLUTE", TOP: LOCKPROGRESS * SCROLLABLEHEIGHT, LEFT: 0, WIDTH: "100%", HEIGHT: VP.H, ZINDEX: 5 }
  : { POSITION: "FIXED", INSET: 0, ZINDEX: 5 };
```

EACH OF THE SEVEN CARDS IN SCROLL-LINKED MODE IS A SCROLLLINKEDCARD WHOSE X, Y, ROTATE, AND SCALE ARE USETRANSFORM VALUES DRIVEN BY A CLAMPED SCROLL PROGRESS (CLAMPED TO LOCKPROGRESS SO VALUES CANNOT KEEP CHANGING PAST THE LOCK). THE KEYFRAMES ARE ANCHORED AT FOUR SCROLL POINTS 0, P1 = LP*0.33, P2 = LP*0.66, LP WHERE LP = MAX(LOCKPROGRESS, 0.05):

```ts
CONST S1CX = VP.W/2 + SLOT.X;            // SECTION 1 FAN CENTER X
CONST S1CY = HERO_ROW_Y + SLOT.Y;        // SECTION 1 FAN CENTER Y
CONST STACKCX = VP.W/2;                  // MID-TRANSITION STACK CENTER X
CONST STACKCY = VP.H/2;                  // MID-TRANSITION STACK CENTER Y
CONST CASCADELEFTREF = VP.W * 0.4;
CONST S2CX = CASCADELEFTREF + CASCADE[I].LEFT + 220/2; // SECTION 2 LADDER CENTER X
CONST S2CY = CASCADE[I].TOP  + 220/2;                  // SECTION 2 LADDER CENTER Y

X        = USETRANSFORM(CLAMPED, [0, P1, P2, LP], [S1CX, STACKCX, STACKCX, S2CX]);
Y        = USETRANSFORM(CLAMPED, [0, P1, P2, LP], [S1CY, STACKCY, S2CY, S2CY]);
ROTATE   = USETRANSFORM(CLAMPED, [0, P1, LP],     [SLOT.ROTATE, 0, CASCADE[I].ROTATE]);
SCALEX   = USETRANSFORM(CLAMPED, [0, P1, LP],     [SLOT.SCALE, 1, 1]);
SCALEY   = USETRANSFORM(CLAMPED, [0, P1, LP],     [SLOT.SCALE, 1, 1]);
```

THIS MEANS THE CARDS FIRST COLLAPSE FROM THE FAN INTO A SINGLE CENTERED STACK (ALL SEVEN OCCUPY THE EXACT SAME CENTER BETWEEN 0 AND P1, SCALING AND UNROTATING TO 1.0 AT SCALE 1 AND ROTATE 0, WHICH PRODUCES THE VISIBLE "GATHER INTO ONE" MOMENT), THEN BETWEEN P1 AND P2 THE STACK SLIDES DOWNWARD TO THE SECTION 2 CASCADE Y WHILE THE X STAYS CENTERED, THEN BETWEEN P2 AND LP THE STACK FANS OUT HORIZONTALLY INTO THE DIAGONAL LADDER. BECAUSE ALL SEVEN CARDS SHARE IDENTICAL X, Y, ROTATE, SCALE, AND SHADOW DURING THE STACK MOMENT, THEY PERFECTLY OVERLAP AND READ AS ONE CARD WITH ONE SHADOW, NO SHADOW STACKING ARTIFACT. THE CASCADE TARGET LAYOUT FOR SECTION 2, RENDERED RELATIVE TO THE WRAPPER ORIGIN, IS A 7-STEP LADDER GOING FROM UPPER-LEFT TO LOWER-RIGHT: FOR I IN 0..6, TOP = 300 + I*70, LEFT = 20 + I*150, ROTATE = -3 + I*3, Z = 7 - I. EACH CARD IS RENDERED ABSOLUTELY AT TOP 0 LEFT 0 WITH TRANSLATE -50% -50% SO X AND Y ARE THE CARD CENTER.

THE CARD MARKUP FOR BOTH INTRO AND SCROLL-LINKED MODES:

```tsx
<MOTION.DIV
  ONMOUSEENTER={() => SETHOVERED(TRUE)}
  ONMOUSELEAVE={() => SETHOVERED(FALSE)}
  WHILEHOVER={{ TRANSITION: { DURATION: 0.2, EASE: [0.34, 1.56, 0.64, 1] } }}
>
  <IMG SRC={SRC} DRAGGABLE={FALSE} />
</MOTION.DIV>
```

SECTION 1, THE HERO, IS A SECTION WITH MIN-HEIGHT 100VH AND OVERFLOW HIDDEN. INSIDE, A CENTERED MAIN ELEMENT WITH PADDINGTOP 140PX HOLDS AN H1 IN FONT-HEADING, FONT-SIZE 96PX, WEIGHT 800, LINE-HEIGHT 1.0, LETTER-SPACING -3PX, COLOR #111111, MAX-WIDTH 1100PX. THE HEADLINE IS TWO LINES: LINE ONE "A PLACE TO DISPLAY", LINE TWO "YOUR MASTERPIECE." EACH WORD IS WRAPPED IN A MOTION.SPAN WITH DISPLAY INLINE-BLOCK, MARGINRIGHT 0.25EM, THAT ANIMATES FROM INITIAL OPACITY 0 Y 28 TO OPACITY 1 Y 0, DURATION 0.5S, EASE EASEOUT, DELAY EQUAL TO GLOBALWORDINDEX * 0.08S (SO WORDS APPEAR IN ORDER ACROSS BOTH LINES). BELOW THE HEADLINE THERE IS A 260PX TALL, 100% WIDE SPACER WITH MARGINTOP 40PX THAT HOLDS THE CHAT BUBBLE OVERLAY; THIS IS WHERE THE SECTION 1 CARDS VISUALLY LIVE IN THE OVERLAY. TWO CHAT BUBBLES SIT ABSOLUTELY ABOVE THE CARDS LAYER AT Z-INDEX 20:

@COPLIN BUBBLE AT LEFT CALC(50% - 320PX), TOP -12PX, BACKGROUND #4D7EFF, PADDING 18PX HORIZONTAL 8PX VERTICAL, BORDER-RADIUS 9999, FONT-HEADING 15PX WEIGHT 600 COLOR WHITE. A SMALL TRIANGLE TAIL UNDER THE BUBBLE AT BOTTOM -8PX LEFT 16PX BUILT WITH BORDERLEFT 8PX SOLID TRANSPARENT, BORDERRIGHT 4PX SOLID TRANSPARENT, BORDERTOP 10PX SOLID #4D7EFF.

@ANDREA BUBBLE AT RIGHT CALC(50% - 420PX), TOP -20PX, BACKGROUND #3DBF7A, SAME PADDING, FONT, AND BORDER-RADIUS. TAIL AT BOTTOM -8PX RIGHT 16PX WITH BORDERLEFT 4PX SOLID TRANSPARENT, BORDERRIGHT 8PX SOLID TRANSPARENT, BORDERTOP 10PX SOLID #3DBF7A.

BOTH BUBBLES DO A JELLY SQUASH-AND-STRETCH MICROANIMATION: OPACITY FROM 0 TO 1 AND SCALEX KEYFRAMES [1, 1.25, 0.75, 1.15, 0.95, 1.05, 1] WITH SIMULTANEOUS SCALEY KEYFRAMES [1, 0.75, 1.25, 0.85, 1.05, 0.95, 1], DURATION 0.8S. COPLIN STARTS AT DELAY 3.05S, ANDREA AT 3.20S, SO THEY POP IN JUST AFTER THE CARDS FINISH THEIR SWEEP.

BENEATH THE BUBBLE SPACER, A PARAGRAPH IN FONT-BODY, 16PX, WEIGHT 400, COLOR RGBA(0,0,0,0.55), LINE-HEIGHT 1.6, MAX-WIDTH 480PX, MARGINTOP 48PX, WITH COPY: "ARTISTS CAN DISPLAY THEIR MASTERPIECES, AND BUYERS CAN DISCOVER AND PURCHASE WORKS THAT RESONATE WITH THEM." IT FADES FROM OPACITY 0 Y 20 TO OPACITY 1 Y 0 OVER 0.6S WITH DELAY 2.2S. BELOW IT A FLEX ROW GAP 16PX WITH MARGINTOP 28PX AND PADDINGBOTTOM 80PX, FADING IN WITH DELAY 2.4S, HOLDS TWO BUTTONS. PRIMARY BUTTON: BACKGROUND #111111, COLOR WHITE, 15PX WEIGHT 600, PADDING 14PX 28PX, BORDER-RADIUS 9999, NO BORDER, HOVER BACKGROUND #333333, LABEL "JOIN FOR $9.99/M". SECONDARY BUTTON: TRANSPARENT BACKGROUND, COLOR #111111, 15PX WEIGHT 500, PADDING 14PX 20PX, BORDER-RADIUS 9999, NO BORDER, HOVER BACKGROUND RGBA(0,0,0,0.06), LABEL "READ MORE".

SECTION 2 HAS DATA-SECTION="TWO", BACKGROUND #F2F2F0, MIN-HEIGHT CALC(100VH - 30PX), PADDING 80PX 64PX 0, DISPLAY FLEX, ALIGN-ITEMS FLEX-START, POSITION RELATIVE, OVERFLOW HIDDEN. IT CONTAINS ONLY A LEFT TEXT COLUMN 520PX WIDE WITH PADDINGTOP 32PX, PLUS TWO FLOATING TAG BUBBLES. THE RIGHT SIDE IS INTENTIONALLY EMPTY SO THE GLOBAL CARDS OVERLAY CAN DROP THE CARDS INTO THE CASCADE LADDER ANCHORED ON CASCADELEFTREF = VP.W * 0.4. THE CARD CASCADE VISUALLY OCCUPIES THE RIGHT TWO-THIRDS OF THE SECTION.

LEFT COLUMN FROM TOP TO BOTTOM: AN EYEBROW DIV IN FONT-HEADING, 11PX, WEIGHT 500, LETTER-SPACING 2.5PX, COLOR RGBA(0,0,0,0.45), MARGINBOTTOM 20PX, TEXT "E-COMMERCE", ENTERING WITH INITIAL OPACITY 0 FILTER BLUR 8PX Y 16 TO OPACITY 1 FILTER BLUR 0 Y 0, DURATION 0.6S EASEOUT, VIEWPORT ONCE WITH MARGIN -80PX. THEN AN H2 IN FONT-HEADING, 60PX, WEIGHT 800, LINE-HEIGHT 1.05, LETTER-SPACING -1.5PX, MARGIN 0, MADE OF THREE LINES: "SHOWCASE, SELL" IN #111111, THEN "& ACQUIRE ARTS TO" IN THE BRAND RED #C0392B, THEN "OUR MARKETPLACE." IN #111111. EVERY WORD IN EVERY LINE IS A MOTION.SPAN WITH DISPLAY INLINE-BLOCK, MARGINRIGHT 0.25EM, ANIMATING FROM OPACITY 0 FILTER BLUR 10PX Y 20 TO OPACITY 1 FILTER BLUR 0 Y 0, DURATION 0.5S EASEOUT, WITH DELAY EQUAL TO GLOBALWORDINDEX * 0.06S. THEN A PARAGRAPH IN FONT-BODY, MARGINTOP 28PX, 15PX, WEIGHT 400, COLOR RGBA(0,0,0,0.55), LINE-HEIGHT 1.65, MAX-WIDTH 340PX, TEXT "DYNAMIC COMMUNITY WHERE ARTISTS AND BUYERS SEAMLESSLY MERGE. ARTFUSION BRINGS TOGETHER CREATORS AND ENTHUSIASTS TO SHARE CREATIVITY." FADES FROM BLUR 8PX Y 16 WITH DELAY 0.5S. THEN A FLEX ROW MARGINTOP 48PX GAP 12PX HOLDING THE SAME PRIMARY "JOIN FOR $9.99/M" BLACK PILL BUTTON AND SECONDARY "READ MORE" OUTLINE PILL BUTTON (THIS ONE WITH A 1.5PX SOLID RGBA(0,0,0,0.15) BORDER, HOVER BACKGROUND RGBA(0,0,0,0.05)), ENTERING WITH DELAY 0.7S.

TWO FLOATING TAGS OVERLAY THE CARDS IN SECTION 2, ANIMATING IN ONLY WHEN THE SECTION IS AT LEAST 95 PERCENT IN VIEW (USEINVIEW WITH AMOUNT 0.95), GOING FROM OPACITY 0 SCALE 0.6 TO OPACITY 1 SCALE 1 OVER 0.5S EASEOUT.

@HOWARD TAG AT TOP 260PX, LEFT CALC(40% + 340PX), Z-INDEX 20, BACKGROUND BRAND RED #C0392B, BORDER-RADIUS 9999, PADDING 9PX 20PX, LABEL "@HOWARD" IN FONT-HEADING 15PX WEIGHT 600 COLOR WHITE. TRIANGLE TAIL CENTERED UNDER THE BUBBLE: BOTTOM -9PX, LEFT 50% TRANSLATEX -50%, BORDERLEFT 8PX SOLID TRANSPARENT, BORDERRIGHT 8PX SOLID TRANSPARENT, BORDERTOP 10PX SOLID #C0392B.

@ROBIN TAG AT TOP 430PX, LEFT CALC(40% + 680PX), Z-INDEX 20, BACKGROUND #111111, SAME PADDING AND FONT, LABEL "@ROBIN" WHITE. TAIL AT BOTTOM -9PX LEFT 20PX WITH BORDERLEFT 8PX SOLID TRANSPARENT, BORDERRIGHT 8PX SOLID TRANSPARENT, BORDERTOP 10PX SOLID #111111. ROBIN APPEARS WITH DELAY 0.15S AFTER HOWARD.

WHILE THE USER SCROLLS THROUGH SECTION 2 AND INTO SECTION 3, ONCE SCROLL PROGRESS CROSSES LOCKPROGRESS THE OVERLAY'S WRAPPER SWITCHES FROM FIXED TO ABSOLUTE AND IS PINNED TO TOP = LOCKPROGRESS * SCROLLABLEHEIGHT. THE SEVEN CARDS REMAIN MOUNTED, USETRANSFORM IS CLAMPED, SO THEIR ON-SCREEN POSE IS FROZEN EXACTLY AS THE FINAL CASCADE. THEY CANNOT MOVE FURTHER REGARDLESS OF ADDITIONAL SCROLLING, AND THEY SCROLL WITH THE DOCUMENT LIKE NORMAL CONTENT. THEY NEVER UNMOUNT OR REBUILD. THE VISIBLE RESULT IS: CARDS GATHER INTO ONE CENTERED OVERLAPPED STACK, DESCEND TOGETHER, FAN OUT INTO THE DIAGONAL LADDER, THEN LOCK IN PLACE ANCHORED TO SECTION 2'S TOP.

SECTION 3 HAS DATA-SECTION="THREE", BACKGROUND #F2F2F0, MIN-HEIGHT 100VH, PADDING 80PX 64PX 80PX, POSITION RELATIVE, OVERFLOW HIDDEN. AT THE TOP, A TEXT BLOCK MAX-WIDTH 520PX MARGINBOTTOM 40PX, POSITION RELATIVE Z-INDEX 10. EYEBROW IN FONT-HEADING 11PX WEIGHT 500, LETTER-SPACING 2.5PX, COLOR RGBA(0,0,0,0.45), MARGINBOTTOM 20PX, TEXT "CLASS BY REATHA C. PHELAN", ENTERING FROM BLUR 8PX Y 12 OPACITY 0 TO BLUR 0 Y 0 OPACITY 1, 0.55S EASEOUT, VIEWPORT ONCE. THEN AN H2 IN FONT-HEADING, 80PX, WEIGHT 800, LINE-HEIGHT 1.0, LETTER-SPACING -2.5PX, COLOR #111111, MARGIN 0, WITH WORDS "GATEWAY", "TO", "ARTIST", "PEOPLE." EACH WORD IS A MOTION.SPAN DISPLAY INLINE-BLOCK MARGINRIGHT 0.2EM, ANIMATING FROM OPACITY 0 FILTER BLUR 10PX Y 20 TO OPACITY 1 FILTER BLUR 0 Y 0, DURATION 0.5S EASEOUT, DELAY I * 0.07S, VIEWPORT ONCE.

A FLOATING @REATHA TAG SITS ABSOLUTELY AT TOP 120PX, RIGHT 180PX, Z-INDEX 10. BACKGROUND #111111, BORDER-RADIUS 9999, PADDING 10PX 22PX, LABEL "@REATHA" IN FONT-HEADING 16PX WEIGHT 600 COLOR WHITE. TRIANGLE TAIL AT BOTTOM -9PX RIGHT 24PX WITH BORDERLEFT 8PX SOLID TRANSPARENT, BORDERRIGHT 4PX SOLID TRANSPARENT, BORDERTOP 10PX SOLID #111111. IT ANIMATES IN WITH THE SAME JELLY SQUASH AND STRETCH AS THE HERO BUBBLES: OPACITY 0 TO 1 AND SCALEX [1, 1.25, 0.75, 1.15, 0.95, 1.05, 1] WITH SCALEY [1, 0.75, 1.25, 0.85, 1.05, 0.95, 1], DURATION 0.8S, DELAY 0.65S, VIEWPORT ONCE.

BELOW THE TEXT BLOCK IS THE AUTOPLAY BANNER. IT IS A MOTION.DIV WITH WIDTH 100%, BORDER-RADIUS 24, OVERFLOW HIDDEN, HEIGHT 600PX, BACKGROUND #111111, ENTERING FROM OPACITY 0 Y 40 FILTER BLUR 12PX TO OPACITY 1 Y 0 FILTER BLUR 0, DURATION 0.8S EASEOUT, DELAY 0.4S, VIEWPORT ONCE WITH MARGIN -60PX. INSIDE IT THREE SLIDES /BANNER-1.PNG, /BANNER-2.PNG, /BANNER-3.PNG (SOURCED FROM QCLAY.DESIGN/LOVABLE/PALLET/BANNER-1.PNG THROUGH BANNER-3.PNG) ARE STACKED AS ABSOLUTELY POSITIONED IMG TAGS FILLING INSET 0 WITH OBJECT-FIT COVER AND OBJECT-POSITION CENTER TOP. EACH SLIDE ANIMATES OPACITY TO 1 IF ITS INDEX EQUALS ACTIVESLIDE OTHERWISE 0, AND SCALE 1 IF ACTIVE OTHERWISE 1.04, TRANSITION DURATION 0.5S EASEINOUT. THE COMPONENT HOLDS ACTIVESLIDE IN USESTATE STARTING AT 0 AND RUNS A SETINTERVAL EVERY 3000MS THAT ADVANCES ACTIVESLIDE TO (ACTIVESLIDE + 1) MOD 3, WITH CLEANUP ON UNMOUNT AND ON ACTIVESLIDE CHANGE.

INSIDE THE BANNER AT TOP 24PX RIGHT 24PX Z-INDEX 10 SITS A ROW OF 3 DOT BUTTONS GAP 5PX. EACH DOT HAS HEIGHT 6PX, THE ACTIVE ONE IS 18PX WIDE AND RGBA(255,255,255,0.95), INACTIVE ONES ARE 6PX WIDE AND RGBA(255,255,255,0.45), BORDER-RADIUS 9999, NO BORDER, NO PADDING, TRANSITION ALL 0.3S EASE, CURSOR POINTER; CLICKING A DOT SETS ACTIVESLIDE TO THAT INDEX.

AT BOTTOM 28PX LEFT 28PX SITS THE WATCH CTA. IT IS A RELATIVE INLINE-BLOCK CONTAINER WITH TWO PULSING RING SPANS BEHIND IT, BOTH POINTER-EVENTS NONE, BOTH BORDER-RADIUS 9999 WITH NO FILL: RING ONE INSET -8PX, BORDER 2PX SOLID RGBA(255,255,255,0.40), ANIMATING SCALE [1, 1.5] AND OPACITY [0.8, 0], DURATION 2S, REPEAT INFINITY, EASEOUT; RING TWO INSET -4PX, BORDER 2PX SOLID RGBA(255,255,255,0.25), SAME ANIMATION BUT DELAY 0.5S. IN FRONT OF THE RINGS SITS A MOTION.BUTTON AT Z-INDEX 2, BACKGROUND WHITE, COLOR #111111, FONT-HEADING 15PX WEIGHT 600, PADDING 12PX 28PX, BORDER-RADIUS 9999, NO BORDER, FLEX ALIGN-ITEMS CENTER GAP 8, LABEL "WATCH", WHILEHOVER SCALE 1.05 OVER 0.2S.

AT BOTTOM 28PX RIGHT 28PX SITS A ROW GAP 10PX OF TWO 44X44 CIRCULAR MOTION.BUTTONS, BACKGROUND RGBA(255,255,255,0.90), BORDER-RADIUS 50%, BOX-SHADOW 0 4PX 16PX RGBA(0,0,0,0.15), NO BORDER, FLEX CENTERED, CURSOR POINTER, WHILEHOVER SCALE 1.08 WITH BACKGROUND #FFFFFF OVER 0.2S. THEY RENDER LUCIDE CHEVRONLEFT AND CHEVRONRIGHT ICONS AT SIZE 20, COLOR #111111, WITH ARIA-LABELS "PREVIOUS SLIDE" AND "NEXT SLIDE". PREV SETS ACTIVESLIDE TO (ACTIVESLIDE - 1 + 3) MOD 3, NEXT SETS ACTIVESLIDE TO (ACTIVESLIDE + 1) MOD 3.

ASSET LIST: PLACE CARD-1.PNG THROUGH CARD-7.PNG AND BANNER-1.PNG THROUGH BANNER-3.PNG IN THE PUBLIC FOLDER, DOWNLOADED FROM HTTPS://QCLAY.DESIGN/LOVABLE/PALLET/.

COLOR TOKENS USED DIRECTLY: PAGE BACKGROUND #F2F2F0, PRIMARY TEXT #111111, BRAND RED #C0392B (SECTION 2 HIGHLIGHT + @HOWARD), BRAND TEAL #4ECDC4 (LOGO + CREATE STRATEGY DOT), BRAND BLUE #4D7EFF (@COPLIN), BRAND GREEN #3DBF7A (@ANDREA), WHITE #FFFFFF, PLUS TRANSLUCENT BLACKS RGBA(0,0,0,0.45) FOR EYEBROW TEXT, RGBA(0,0,0,0.55) FOR BODY COPY, RGBA(0,0,0,0.15) FOR BUTTON OUTLINES, RGBA(0,0,0,0.05) AND RGBA(0,0,0,0.06) FOR HOVER BACKGROUNDS. EASING TOKENS USED THROUGHOUT: SMOOTHEASE [0.22, 1, 0.36, 1] FOR HERO CHOREOGRAPHY AND SCROLL CASCADE, HOVEREASE [0.34, 1.56, 0.64, 1] FOR SNAPPY HOVER AND RE-REVEAL, EASEOUT FOR TEXT REVEALS, EASEINOUT FOR SLIDE CROSS-FADES.