Synergeus — AI Fintech Landing Page
Landing page vendored from the MIT-licensed
pulkitxm/claude-directorygallery.
Synergeus is a pixel-faithful dark, cinematic marketing landing page for an AI-powered personal finance platform. The page is composed of three scroll-revealed sections — a video hero, an analytics showcase, and an AI intelligence feature grid — with meticulous attention to typography, motion timing, glass surfaces, and SVG construction. A striking fintech UI landing page suited to AI advisor, wealth management, and financial SaaS products.
Workflow
- Clone
example.htmlinto the user's workspace as the working file. - Replace placeholder content with the user's real brand name, headlines, body copy, numbers, and imagery. Match existing image dimensions when swapping assets.
- Preserve the design system. The palette, type scale, spacing rhythm, and motion in the build spec below are the identity — do not substitute fonts, recolour the palette, or strip decorative elements.
- Extend by duplicating sections, never by importing a layout from another template. If a section is missing, design it from scratch in this template's own vocabulary.
- Keep motion accessible. Every animation must stay behind
prefers-reduced-motion, as the build spec requires.
Output contract
Emit between <artifact> tags:
<artifact identifier="synergeus-landing" type="text/html" title="Synergeus — AI Fintech Landing Page">
<!doctype html>
<html>...</html>
</artifact>
Build spec
The upstream prompt that produced this design, verbatim.
SYNERGEUS LANDING PAGE - FULL ACCURATE SPEC
TECH STACK
REACT 18, VITE, TYPESCRIPT, TAILWIND CSS V3, FRAMER-MOTION, HLS.JS, LUCIDE-REACT, REACT-ROUTER-DOM.
GLOBAL FONTS (LOADED IN INDEX.HTML VIA GOOGLE FONTS)
INTER TIGHT WEIGHTS 300, 400, 500, 600, 700.
INSTRUMENT SERIF ITALIC AND ROMAN.
TAILWIND ALIASES: FONT-HEADING AND FONT-SANS BOTH MAP TO "INTER TIGHT". FONT-SERIF MAPS TO "INSTRUMENT SERIF". BODY DEFAULT IS FONT-HEADING.
GLOBAL CSS ANIMATIONS (SRC/INDEX.CSS)
KEYFRAMES MARQUEE: TRANSLATEX 0 TO -50%. CLASS .ANIMATE-MARQUEE USES 14S LINEAR INFINITE.
KEYFRAMES STORY-FILL-1: SCALEX 0 AT 0%, SCALEX 1 AT 50%, SCALEX 1 AT 100%.
KEYFRAMES STORY-FILL-2: SCALEX 0 AT 0%, SCALEX 0 AT 50%, SCALEX 1 AT 100%.
.STORY-BAR-1 .STORY-BAR-FILL RUNS STORY-FILL-1 6S LINEAR INFINITE, TRANSFORM-ORIGIN LEFT CENTER.
.STORY-BAR-2 .STORY-BAR-FILL RUNS STORY-FILL-2 6S LINEAR INFINITE, TRANSFORM-ORIGIN LEFT CENTER.
DESIGN TOKENS (SRC/INDEX.CSS :ROOT, HSL)
STANDARD SHADCN LIGHT PALETTE: BACKGROUND 0 0% 100%, FOREGROUND 222.2 84% 4.9%, PRIMARY 222.2 47.4% 11.2%, ETC. RADIUS 0.5REM. A .DARK VARIANT EXISTS BUT IS NOT CURRENTLY TOGGLED.
PAGE COMPOSITION (SRC/PAGES/INDEX.TSX)
RENDERS THEN . NO ROUTER-DRIVEN NAVIGATION IN THIS VIEW.
============================================================
SECTION 1 - HERO (SRC/COMPONENTS/HERO.TSX)
CONTAINER
POSITION RELATIVE, OVERFLOW HIDDEN, MINHEIGHT 100VH, BACKGROUND #000.
BACKGROUND VIDEO (SRC/COMPONENTS/HEROVIDEO.TSX)
A SINGLE ELEMENT, ABSOLUTE INSET-0, H-FULL W-FULL, OBJECT-COVER, ZINDEX 0.
ATTRIBUTES: AUTOPLAY, LOOP, MUTED (ALSO SET MUTED, DEFAULTMUTED, AUTOPLAY, LOOP, PLAYSINLINE AND WEBKIT-PLAYSINLINE IMPERATIVELY IN USEEFFECT FOR IOS).
SOURCE URL: HTTPS://STREAM.MUX.COM/RFMAY41MLJXRK4K28XBEP6BT7UOMSF6D6CE7C7UL4VS.M3U8
PLAYBACK LOGIC:
IF BROWSER SUPPORTS APPLICATION/VND.APPLE.MPEGURL NATIVELY (SAFARI): ASSIGNS VIDEO.SRC DIRECTLY, CALLS PLAY() ON LOADEDMETADATA.
ELSE IF HLS.ISSUPPORTED(): CREATES NEW HLS({ENABLEWORKER: TRUE}), LOADSOURCE, ATTACHMEDIA, PLAYS ON MANIFEST_PARSED.
ELSE: ASSIGNS VIDEO.SRC AS A FALLBACK.
CLEANUP DESTROYS HLS INSTANCE ON UNMOUNT.
ERRORS FROM PLAY() ARE SWALLOWED WITH CONSOLE.WARN "VIDEO PLAY BLOCKED".
DARK OVERLAY
ABSOLUTE INSET-0, ZINDEX 1.
BACKGROUND: LINEAR-GRADIENT(TO BOTTOM, RGBA(0,0,0,0.60) 0%, RGBA(0,0,0,0.15) 50%, RGBA(0,0,0,0.65) 100%).
NAVBAR (SRC/COMPONENTS/NAVBAR.TSX)
FIXED TOP-0 LEFT-0 RIGHT-0, ZINDEX 50, PADDING 16PX 32PX.
INNER ROW: RELATIVE FLEX ITEMS-CENTER, HEIGHT 48.
LEFT: WITH (LOGO HEIGHT 28PX).
CENTER PILL (ABSOLUTELY POSITIONED, LEFT 50%, TRANSLATEX -50%):
BACKGROUND RGBA(28,28,28,0.75)
BACKDROP-FILTER BLUR(12PX) (AND -WEBKIT-)
BORDER 1PX SOLID RGBA(255,255,255,0.10)
BORDERRADIUS 9999, PADDING 6PX 8PX, GAP 4
ITEMS ARRAY: ["ADVISORS", "WHAT WE DO", "AI INTELLIGENCE", "TOOLS"]
EACH LINK: FONT-HEADING, FONTSIZE 14, WEIGHT 400, COLOR RGBA(255,255,255,0.80), PADDING 8PX 16PX, BORDERRADIUS 9999.
HOVER MICRO-INTERACTION: ONMOUSEENTER SETS BACKGROUND RGBA(255,255,255,0.10); ONMOUSELEAVE RESTORES TRANSPARENT (INLINE JS, NO TRANSITION DURATION).
RIGHT (ML-AUTO, GAP 8):
"LOGIN" LINK: FONT-HEADING, FONTSIZE 14, COLOR RGBA(255,255,255,0.80), PADDING 8PX 16PX.
"FIND AN ADVISOR" BUTTON: FONT-HEADING, BACKGROUND #FFF, COLOR #000, FONTSIZE 14, WEIGHT 500, PADDING 10PX 20PX, BORDERRADIUS 9999.
HERO CONTENT WRAPPER
ABSOLUTE INSET-0, FLEX-COL ITEMS-CENTER JUSTIFY-CENTER, ZINDEX 10, PADDINGTOP 80.
H1 TITLE (MOTION.H1)
INITIAL: OPACITY 0, Y -40. ANIMATE: OPACITY 1, Y 0. TRANSITION: DURATION 0.9S, EASE CUBIC-BEZIER [0.22, 1, 0.36, 1].
STYLE: COLOR #FFF, TEXTALIGN CENTER, MARGIN 0, FONTSIZE 102, LINEHEIGHT 96PX, LETTER-SPACING -1.02PX.
THREE SPANS, ALL WEIGHT 400:
LINE 1 (BLOCK, FONT-HEADING): "OUR AI SIMPLIFY"
LINE 2 (BLOCK) CONTAINS:
"YOUR " IN FONT-HEADING (INTER TIGHT UPRIGHT)
"FINANCIAL LIFE" IN FONT-SERIF ITALIC (INSTRUMENT SERIF ITALIC)
CTA BUTTON (MOTION.BUTTON)
INITIAL: OPACITY 0, Y 30. ANIMATE: OPACITY 1, Y 0. TRANSITION: DURATION 0.8S, DELAY 0.25S, EASE [0.22, 1, 0.36, 1].
CLASS FONT-HEADING, FLEX ITEMS-CENTER.
STYLE: MARGINTOP 32, BACKGROUND #FFF, COLOR #000, FONTSIZE 15, WEIGHT 500, PADDINGLEFT 24, PADDINGRIGHT 8, PADDINGTOP 6, PADDINGBOTTOM 6, BORDERRADIUS 9999, GAP 8.
TEXT: "START FREE TRIAL NOW".
TRAILING CIRCLE: 24X24, BORDERRADIUS 9999, BACKGROUND #000, CONTAINS LUCIDE ARROWUPRIGHT SIZE 14, COLOR #FFF, STROKEWIDTH 2.5.
STORY CARD (SRC/COMPONENTS/STORYCARD.TSX) - RENDERED IMMEDIATELY AFTER THE CTA
WRAPPER: MARGINTOP 48, PERSPECTIVE 1200.
CARD (MOTION.DIV):
ENTRY ANIMATION: OPACITY 0 -> 1, Y 30 -> 0, DURATION 0.8S, DELAY 0.2S, EASE [0.22, 1, 0.36, 1].
WIDTH 310, HEIGHT 455, BORDERRADIUS 28, BACKGROUND #1A1A1A, OVERFLOW HIDDEN, POSITION RELATIVE.
TRANSFORMSTYLE PRESERVE-3D.
3D TILT MICRO-INTERACTION: TRACKS WINDOW MOUSEMOVE, NORMALIZES MOUSE TO RANGE [-1, 1] RELATIVE TO VIEWPORT CENTER, FEEDS TWO MOTION VALUES X,Y INTO USESPRING (STIFFNESS 120, DAMPING 18, MASS 0.4). MAPPED VIA USETRANSFORM: ROTATEY = SX IN [-18, 18] DEGREES, ROTATEX = SY IN [12, -12] DEGREES. APPLIED TO THE CARD.
BOXSHADOW: "0 40PX 100PX RGBA(0,0,0,0.55), 0 8PX 24PX RGBA(0,0,0,0.35), INSET 0 1PX 0 RGBA(255,255,255,0.18), INSET 0 0 0 1PX RGBA(255,255,255,0.06)".
CONTENT LAYERS (BACK TO FRONT):
ABSOLUTE INSET-0 H-FULL W-FULL OBJECT-COVER, OBJECTPOSITION "CENTER 20%".
SOFT-LIGHT TINTED OVERLAY, MIXBLENDMODE SOFT-LIGHT, LINEAR-GRADIENT 160DEG FROM RGBA(220,255,90,0.65) 0% -> RGBA(170,230,70,0.35) 40% -> RGBA(80,140,40,0.25) 100%. POINTER-EVENTS NONE.
RADIAL HIGHLIGHT AT 30% 15% FROM RGBA(230,255,120,0.25) TO TRANSPARENT 55%.
INSET TOP HIGHLIGHT: BORDERRADIUS 28, BOXSHADOW INSET 0 1PX 0 RGBA(255,255,255,0.25).
TWO STORY PROGRESS BARS (TOP 24, LEFT 24, RIGHT 24, GAP 6, ZINDEX 20). EACH IS A 3PX TALL PILL WITH BACKGROUND RGBA(0,0,0,0.25), OVERFLOW HIDDEN, CONTAINING A FILL DIV (BACKGROUND RGBA(0,0,0,0.95)). FILL IS ANIMATED BY CSS CLASSES STORY-BAR-1/STORY-BAR-2 (SEE GLOBAL ANIMATIONS) - BAR 1 FILLS 0->100% OVER THE FIRST HALF OF A 6S CYCLE, BAR 2 FILLS DURING THE SECOND HALF, BOTH LOOP INFINITELY.
LOWER DARK GRADIENT: BOTTOM 0, HEIGHT 55%, LINEAR-GRADIENT 0DEG #040504 20.54% -> RGBA(29,37,9,0) 100%.
HEADLINE (LEFT 24, RIGHT 24, BOTTOM 88, ZINDEX 10). MOTION.H3 WITH KEY={SLIDE} SO IT RE-MOUNTS ON SLIDE CHANGE. INITIAL OPACITY 0, Y 12; ANIMATE TO OPACITY 1, Y 0; DURATION 0.5S, EASE [0.22, 1, 0.36, 1]. STYLE: COLOR #FFF, FONTSIZE 38, LINEHEIGHT 40PX, LETTERSPACING -0.5PX, TEXTSHADOW 0 2PX 18PX RGBA(0,0,0,0.35).
TWO SLIDE STATES ALTERNATING:
SLIDE 0: "GUIDING" IN FONT-HEADING BOLD, THEN , THEN "YOUR MONEY" IN FONT-SERIF ITALIC WEIGHT 400.
SLIDE 1: "BUILDING" IN FONT-HEADING BOLD, THEN , THEN "THE FUTURE" IN FONT-SERIF ITALIC WEIGHT 400.
SLIDE TIMER: SETTIMEOUT 3000MS SETS SLIDE 1 FIRST; SETINTERVAL EVERY 6000MS RESETS TO 0 THEN TO 1 AFTER 3000MS (SYNCHRONIZED WITH THE PROGRESS BARS).
BOTTOM ACTION ROW (LEFT 24, RIGHT 24, BOTTOM 24, GAP 10, ZINDEX 10):
"TOP RATED" PILL: FONT-HEADING, BACKGROUND RGBA(255,255,255,0.96), COLOR #0A0A0A, FONTSIZE 13, WEIGHT 500, PADDING 9PX 16PX, BORDERRADIUS 9999, BOXSHADOW "0 6PX 18PX RGBA(0,0,0,0.25), INSET 0 1PX 0 RGBA(255,255,255,0.9)".
TWO ICON BUTTONS (LUCIDE HEART, THEN MESSAGECIRCLE): 38X38, BORDERRADIUS 14, BACKGROUND RGBA(20,20,20,0.45), BACKDROP-FILTER BLUR(10PX), BORDER 1PX SOLID RGBA(255,255,255,0.14), INSET TOP HIGHLIGHT RGBA(255,255,255,0.12). ICON SIZE 18, COLOR #FFF, STROKEWIDTH 1.8.
BOTTOM-LEFT BLOCK (HERO)
ABSOLUTE, BOTTOM 40, LEFT 40, ZINDEX 10.
HEADING "NATIONALLY RECOGNIZED": FONT-HEADING, FONTSIZE 21, LINEHEIGHT 1.2, COLOR RGBA(255,255,255,0.6), MARGINBOTTOM 18.
MARQUEE: CONTAINER WIDTH 430, OVERFLOW HIDDEN. INNER ROW CLASS "FLEX ANIMATE-MARQUEE", GAP 54, WIDTH MAX-CONTENT.
LOGOS ARRAY (EACH RENDERED TWICE, BACK-TO-BACK, FOR SEAMLESS LOOP): HTTPS://QCLAY.DESIGN/LOVABLE/SYNERGY/LOGO-TAA.PNG, HTTPS://QCLAY.DESIGN/LOVABLE/SYNERGY/LOGO-HARRIS.PNG, HTTPS://QCLAY.DESIGN/LOVABLE/SYNERGY/LOGO-SIEMENS.PNG, HTTPS://QCLAY.DESIGN/LOVABLE/SYNERGY/LOGO-SUMMIT.PNG.
EACH: HEIGHT 30, WIDTH AUTO, OBJECTFIT CONTAIN, FILTER "BRIGHTNESS(0) INVERT(1) OPACITY(0.55)" (RENDERS AS ~55% WHITE SILHOUETTE), FLEXSHRINK 0.
MARQUEE ANIMATION: TRANSLATEX 0 -> -50%, 14S LINEAR INFINITE.
BOTTOM-RIGHT BLOCK (HERO)
ABSOLUTE, BOTTOM 40, RIGHT 40, ZINDEX 10, MAXWIDTH 430.
PARAGRAPH: FONT-HEADING, COLOR #FFF, FONTSIZE 21, LINEHEIGHT 1.4, MARGINBOTTOM 12.
TEXT: "SYNERGEUS IS YOUR ALL IN ONE FINANCIAL HOME, NOW POWERED BY YOUR OWN INTELLIGENT AI ADVISOR."
BELOW IT, ANCHOR "LEARN MORE": FONT-HEADING, COLOR #FFF, UNDERLINE, FONTSIZE 21.
============================================================
SECTION 2 - ANALYTICS (SRC/COMPONENTS/ANALYTICS.TSX)
ASSETS
HTTPS://QCLAY.DESIGN/LOVABLE/SYNERGY/BLOCK-1.PNG (LEFT CARD BACKGROUND)
HTTPS://QCLAY.DESIGN/LOVABLE/SYNERGY/BLOCK-2.PNG (RIGHT CARD BACKGROUND)
HTTPS://QCLAY.DESIGN/LOVABLE/SYNERGY/PERSON-2.PNG (PORTRAIT INSIDE RIGHT CARD)
HTTPS://QCLAY.DESIGN/LOVABLE/SYNERGY/LOGO-LOV.SVG (SYNERGEUS MARK IN BRAND PILL)
CONTAINER
, BACKGROUND #000, PADDING 80PX 48PX, CLASSNAME OVERFLOW-HIDDEN.
SCROLL TRIGGER
A REF ATTACHED TO THE HEADER DIV. USEINVIEW(REF, { ONCE: TRUE, MARGIN: "-100PX" }) GATES ALL ENTRY ANIMATIONS AND THE COUNT-UP ANIMATIONS IN THIS SECTION. ONCE IT ENTERS, ISINVIEW STAYS TRUE.
HEADER (TEXTALIGN CENTER, MARGINBOTTOM 64)
EYEBROW: FONT-HEADING, FONTSIZE 12, WEIGHT 500, LETTERSPACING 2, COLOR RGBA(255,255,255,0.50), MARGINBOTTOM 16. TEXT: "ANALYTICS".
H2 (MOTION.H2):
INITIAL: OPACITY 0, FILTER BLUR(12PX), Y 30. ANIMATE (WHEN ISINVIEW): OPACITY 1, FILTER BLUR(0PX), Y 0. TRANSITION DURATION 0.8S, EASE "EASEOUT".
STYLE: MARGIN 0, COLOR #FFF. TWO BLOCK SPANS, BOTH FONTSIZE 72, WEIGHT 400, LINEHEIGHT 1, LETTERSPACING -1.02PX:
SPAN 1 (FONT-HEADING, UPRIGHT): "SMARTER CASH FLOW"
SPAN 2 (FONT-SERIF ITALIC): "INSIGHTS AT A GLANCE"
SUBHEAD (MOTION.P):
INITIAL: OPACITY 0, FILTER BLUR(8PX), Y 20. ANIMATE: OPACITY 1, FILTER BLUR(0PX), Y 0. DURATION 0.8S, EASEOUT, DELAY 0.2S.
FONT-HEADING, FONTSIZE 16, WEIGHT 400, COLOR RGBA(255,255,255,0.60), MARGINTOP 16.
TEXT: "KEEP YOUR INCOME AND EXPENSE IN SYNC WITH REAL-TIME AI".
CARDS ROW
FLEX ROW, GAP 16, ALIGNITEMS STRETCH, MAXWIDTH 1200, MARGIN 0 AUTO.
CARD 1 - LEFT (FLEX 1.4, THE WIDER CARD) MOTION.DIV
ENTRY: OPACITY 0 -> 1, X -60 -> 0, DURATION 0.8S, EASEOUT, DELAY 0.3S.
BORDERRADIUS 24, OVERFLOW HIDDEN, POSITION RELATIVE, MINHEIGHT 480.
BACKGROUND:
ABSOLUTE INSET-0 COVER, ZINDEX 0.
TINT LAYER: ABSOLUTE INSET-0, ZINDEX 1, BACKGROUND RGBA(0,0,0,0.35).
GLASS OVERVIEW CARD (ABSOLUTE TOP 32, LEFT 32, RIGHT 32, ZINDEX 2):
BORDERRADIUS 20, BORDER 1PX SOLID RGBA(255,255,255,0.20), BACKGROUND RGBA(255,255,255,0.10), BACKDROP-FILTER BLUR(56PX), PADDING 24PX 28PX.
TOP ROW (FLEX SPACE-BETWEEN, MARGINBOTTOM 8):
"MONTHLY OVERVIEW": FONT-HEADING, FONTSIZE 11, WEIGHT 500, LETTERSPACING 1.5, COLOR RGBA(255,255,255,0.60).
"MONTHLY": SAME STYLE + TEXTDECORATION UNDERLINE.
BIG AMOUNT: FONT-HEADING, FONTSIZE 42, WEIGHT 400, LETTERSPACING -1PX, COLOR #FFF, MARGINBOTTOM 24, FONTVARIANTNUMERIC TABULAR-NUMS.
RENDERS .
COUNT-UP HOOK BEHAVIOR: REQUESTANIMATIONFRAME LOOP, EASING EASED = 1 - (1 - T)^3 (CUBIC EASE-OUT). OUTPUT FORMATTED WITH TOLOCALESTRING EN-US, MIN/MAX 2 FRACTION DIGITS, PREFIXED WITH "$". SO IT ANIMATES FROM "$100.00" TO "$14,250.00" OVER 1200MS WHEN ISINVIEW BECOMES TRUE.
DASHED DIVIDER: WIDTH 100%, BORDERTOP 1PX DASHED RGBA(255,255,255,0.20), MARGINBOTTOM 20.
THREE ROWS (EACH MARGINBOTTOM 16). ROW LABELS AND VALUES USE FONT-HEADING; LABEL FONTSIZE 13, COLOR RGBA(255,255,255,0.70); VALUE FONTSIZE 13, COLOR #FFF, WEIGHT 500.
ROW 1: "INCOME" / "$15,500", BAR WIDTH 75%, FILL LINEAR-GRADIENT(90DEG, #1DC47D 60.8%, RGBA(29,196,125,0) 100%).
ROW 2: "INVESTMENT" / "$4,250", BAR WIDTH 45%, FILL LINEAR-GRADIENT(90DEG, #B48F17 55.74%, RGBA(180,143,23,0) 100%).
ROW 3: "EXPENSES" / "$8,200", BAR WIDTH 60%, FILL LINEAR-GRADIENT(90DEG, #FFF 52.46%, RGBA(255,255,255,0) 100%).
BAR TRACK: HEIGHT 5, BORDERRADIUS 5, WIDTH 100%, MARGINTOP 6, POSITION RELATIVE. INSIDE IT A BASE LAYER (ABSOLUTE INSET-0, OPACITY 0.13, BACKGROUND LINEAR-GRADIENT 90DEG #040504 0% -> RGBA(4,5,4,0.50) 100%) AND THE COLORED FILL (ABSOLUTE LEFT 0 TOP 0, HEIGHT 100%, WIDTH PER ROW, BORDERRADIUS 5, BACKGROUND PER ROW).
NOTE: BAR FILLS ARE STATIC WIDTHS, NOT ANIMATED.
BOTTOM TEXT BLOCK (ABSOLUTE BOTTOM 22, LEFT 32, RIGHT 32, ZINDEX 2):
HEADING: FONT-SERIF ITALIC, FONTSIZE 26, WEIGHT 400, COLOR #FFF, MARGINBOTTOM 8.
"SEE THE FULL PICTURE OF YOUR FINANCES."
PARAGRAPH: FONT-HEADING, FONTSIZE 13, WEIGHT 400, LINEHEIGHT 1.6, COLOR RGBA(255,255,255,0.65), MARGIN 0.
"AI KEEPS YOUR INCOME, EXPENSES, AND GOALS EFFORTLESSLY ALIGNED GIVING YOU A CLEARER VIEW OF YOUR FINANCIAL RHYTHM, SMARTER DECISIONS, AND LASTING STABILITY."
CARD 2 - RIGHT (FLEX 1) MOTION.DIV
ENTRY: OPACITY 0 -> 1, X 60 -> 0, DURATION 0.8S, EASEOUT, DELAY 0.45S.
BORDERRADIUS 24, OVERFLOW HIDDEN, POSITION RELATIVE, MINHEIGHT 480.
BACKGROUND:
ABSOLUTE INSET-0 COVER, ZINDEX 0.
TINT LAYER: ABSOLUTE INSET-0, ZINDEX 1, BACKGROUND RGBA(0,0,0,0.25).
"DAILY" TAG (ABSOLUTE TOP 24, RIGHT 24, ZINDEX 2): FONT-HEADING, FONTSIZE 11, WEIGHT 500, LETTERSPACING 1.5, COLOR RGBA(255,255,255,0.70), TEXTDECORATION UNDERLINE.
WHITE TRANSACTION CARD (ABSOLUTE TOP 32, LEFT 32, ZINDEX 2):
WIDTH 200, BORDERRADIUS 16, BACKGROUND #FFF, PADDING 16PX 18PX, BOXSHADOW 0 8PX 32PX RGBA(0,0,0,0.20).
TOP ROW (FLEX SPACE-BETWEEN):
AMOUNT: FONT-HEADING, FONTSIZE 22, WEIGHT 400, COLOR #000, LETTERSPACING -0.5PX, FONTVARIANTNUMERIC TABULAR-NUMS. RENDERS -> ANIMATES "$10.00" -> "$925.00" OVER 1.2S WITH CUBIC EASE-OUT, TRIGGERED WHEN SECTION ENTERS VIEW (SYNCED WITH THE $14,250 COUNT).
LUCIDE INFO ICON, SIZE 16, COLOR RGBA(0,0,0,0.35).
CAPTION: FONT-HEADING, FONTSIZE 12, COLOR RGBA(0,0,0,0.45), MARGINBOTTOM 14. TEXT: "SENT TODAY".
PILL BUTTON: FONT-HEADING, FLEX SPACE-BETWEEN ITEMS-CENTER, BACKGROUND #000, COLOR #FFF, FONTSIZE 13, WEIGHT 500, PADDING 10PX 14PX, BORDERRADIUS 9999, WIDTH 100%, NO BORDER.
LABEL: "VIEW TRANSACTION".
TRAILING CIRCLE: 24X24, BORDERRADIUS 50%, BACKGROUND RGBA(255,255,255,0.15), CONTAINS LUCIDE ARROWUPRIGHT SIZE 13, COLOR #FFF.
PORTRAIT IMAGE (ABSOLUTE, BOTTOM 140, LEFT 50%, TRANSLATEX(-50%), ZINDEX 2):
, WIDTH 200, HEIGHT 240, OBJECTFIT COVER, OBJECTPOSITION "TOP CENTER", BORDERRADIUS 16.
BRAND BAR (ABSOLUTE BOTTOM 160, RIGHT 24, ZINDEX 3, FLEX ITEMS-CENTER, GAP 8):
PILL: FLEX ITEMS-CENTER, GAP 8, BACKGROUND RGBA(255,255,255,0.15), BACKDROP-FILTER BLUR(12PX), BORDERRADIUS 9999, PADDING 8PX 16PX 8PX 10PX.
CONTAINS ONLY . (NO SEPARATE "SYNERGEUS" TEXT - THE SVG ALREADY INCLUDES THE WORDMARK.)
ADJACENT CIRCULAR BUTTON: 36X36, BORDERRADIUS 50%, BACKGROUND RGBA(255,255,255,0.15), BACKDROP-FILTER BLUR(12PX), NO BORDER, CONTAINS LUCIDE ARROWUPRIGHT SIZE 16, COLOR #FFF.
BOTTOM TEXT BLOCK (ABSOLUTE BOTTOM 22, LEFT 32, RIGHT 32, ZINDEX 2):
HEADING: FONT-SERIF ITALIC, FONTSIZE 24, WEIGHT 400, COLOR #FFF, MARGINBOTTOM 8. "YOUR MONEY, PERFECT TRANSACTIONS".
PARAGRAPH: FONT-HEADING, FONTSIZE 13, WEIGHT 400, LINEHEIGHT 1.6, COLOR RGBA(255,255,255,0.65), MARGIN 0.
"STAY GROUNDED WITH REAL-TIME VISIBILITY INTO WHERE YOUR MONEY'S GOING AND GROWING."
ANIMATION SUMMARY (SECTION 2, IN FIRING ORDER ONCE ISINVIEW=TRUE)
T=0.0S : H2 STARTS BLUR-IN (12PX -> 0), OPACITY AND Y 30 -> 0, OVER 0.8S EASEOUT.
T=0.2S : SUBHEAD BLUR-IN (8PX -> 0), OPACITY AND Y 20 -> 0, OVER 0.8S EASEOUT.
T=0.3S : CARD 1 SLIDES FROM X -60 TO 0 OVER 0.8S EASEOUT.
T=0.45S: CARD 2 SLIDES FROM X 60 TO 0 OVER 0.8S EASEOUT.
ON THE SAME TRIGGER: $14,250.00 COUNTS UP FROM $100.00 (1200MS CUBIC EASE-OUT) AND $925.00 COUNTS UP FROM $10.00 (1200MS CUBIC EASE-OUT). BOTH RUN IN PARALLEL AS SOON AS ISINVIEW FLIPS TRUE.
NO HOVER OR SCROLL-LINKED MICRO-INTERACTIONS ON SECTION 2 CARDS BEYOND THIS.
════════════════════════════════════════
SECTION 3 - AI INTELLIGENCE - FULL TECHNICAL SPECIFICATION
════════════════════════════════════════
OVERVIEW
A DARK, SCROLL-TRIGGERED SHOWCASE SECTION FEATURING THREE EQUAL-WIDTH CARDS THAT DEMONSTRATE AI CAPABILITIES. EACH CARD HAS A PHOTOGRAPHIC BACKGROUND IMAGE, A DARK OVERLAY, AN INTERACTIVE UI ELEMENT IN THE UPPER AREA, AND AN ALIGNED TITLE PLUS DESCRIPTION AT THE BOTTOM. ALL ENTRY ANIMATIONS ARE GATED ON A SINGLE USEINVIEW TRIGGER THAT FIRES ONCE WHEN THE SECTION ENTERS THE VIEWPORT. AFTER THAT INITIAL REVEAL, CERTAIN ELEMENTS CONTINUE TO LOOP (CARD 1 QUESTION ROTATION, CARD 3 TRAVELING CONNECTOR DOTS).
TECH STACK
REACT 18 WITH TYPESCRIPT. FRAMER-MOTION PROVIDES MOTION, USEINVIEW, ANIMATEPRESENCE. LUCIDE-REACT PROVIDES THE ARROWUPRIGHT ICON. FORWARDREF IS USED SO NODE DOM POSITIONS CAN BE MEASURED. NATIVE SVG ANIMATEMOTION PLUS MPATH IS USED FOR PATH-FOLLOWING TRAVELING DOTS IN CARD 3. STYLING IS DONE WITH INLINE STYLES, NO TAILWIND CLASSES INSIDE THIS COMPONENT.
ASSETS, ALL SERVED FROM /PUBLIC
HTTPS://QCLAY.DESIGN/LOVABLE/SYNERGY/BACK-3-1.PNG IS THE BACKGROUND FOR CARD 1, A DARK MOODY SCENE. HTTPS://QCLAY.DESIGN/LOVABLE/SYNERGY/BACK-3-2.PNG IS THE BACKGROUND FOR CARD 2, A GREEN GRASSY LANDSCAPE. HTTPS://QCLAY.DESIGN/LOVABLE/SYNERGY/BACK-3-3.PNG IS THE BACKGROUND FOR CARD 3, A TEXTURED SURFACE. HTTPS://QCLAY.DESIGN/LOVABLE/SYNERGY/LOGO-LOV.SVG IS THE SYNERGEUS LOGO MARK, USED TWICE INSIDE CARD 1'S GLASS UI (ONCE LARGE IN A WHITE SQUARE, ONCE SMALL INSIDE THE ANSWER ICON CHIP).
FONTS
'INTER TIGHT' IS USED FOR ALL BODY, UI, LABELS, AND THE UPRIGHT HEADING PARTS. 'INSTRUMENT SERIF' ITALIC IS USED FOR ACCENT AND DISPLAY TEXT SUCH AS "AI ADVISOR", "NATURAL LANGUAGE QUERIES", "PREDICTIVE ANALYSIS", "SMART CATEGORIZATION", THE BIG "3%" IN CARD 2, AND THE ITALIC GLASS PILL NODES IN CARD 3.
════════════════════════════════════════
CONTAINER
A SECTION ELEMENT WITH BACKGROUND #000, PADDING 80PX ON TOP, 48PX ON THE SIDES, 80PX ON THE BOTTOM, OVERFLOW HIDDEN.
════════════════════════════════════════
SCROLL TRIGGER
CONST REF = USEREF(NULL) CONST ISINVIEW = USEINVIEW(REF, { ONCE: TRUE, MARGIN: "-100PX" })
THE REF IS ATTACHED TO THE CENTERED HEADER WRAPPER. ONCE ISINVIEW FLIPS TO TRUE IT STAYS TRUE. EVERY ENTRY ANIMATION IN THE SECTION READS FROM THIS SINGLE BOOLEAN.
════════════════════════════════════════
SECTION HEADER
A WRAPPER DIV WITH REF ATTACHED, TEXT-ALIGN CENTER, MARGIN-BOTTOM 64PX.
EYEBROW BADGE ABOVE THE HEADING. PLAIN TEXT "AI INTELLIGENCE". FONT 'INTER TIGHT', SIZE 12, WEIGHT 500, LETTER-SPACING 2, COLOR RGBA(255,255,255,0.50), MARGIN-BOTTOM 16. NO ANIMATION OF ITS OWN, FADES IN WITH THE PAGE.
H2 HEADING USES MOTION.H2. INITIAL = { OPACITY: 0, FILTER: "BLUR(12PX)", Y: 30 } ANIMATE (WHEN ISINVIEW) = { OPACITY: 1, FILTER: "BLUR(0PX)", Y: 0 } TRANSITION = { DURATION: 0.8, EASE: "EASEOUT" } STYLE: MARGIN 0, COLOR #FFF. INSIDE THE H2 THERE ARE TWO INLINE SPANS, BOTH FONT-SIZE 72, FONT-WEIGHT 400, LETTER-SPACING -1.02PX, COLOR #FFF. SPAN 1 IS 'INTER TIGHT' UPRIGHT WITH THE TEXT "YOUR PERSONAL " (NOTE THE TRAILING SPACE). SPAN 2 IS 'INSTRUMENT SERIF' ITALIC WITH THE TEXT "AI ADVISOR".
SUBTEXT IS A MOTION.P DIRECTLY UNDER THE H2. INITIAL = { OPACITY: 0, FILTER: "BLUR(8PX)", Y: 20 } ANIMATE (WHEN ISINVIEW) = { OPACITY: 1, FILTER: "BLUR(0PX)", Y: 0 } TRANSITION = { DURATION: 0.8, EASE: "EASEOUT", DELAY: 0.2 } STYLE: 'INTER TIGHT', SIZE 16, WEIGHT 400, COLOR RGBA(255,255,255,0.60), LINE-HEIGHT 1.6, TEXT-ALIGN CENTER, MARGIN-TOP 16. TEXT: "EXPERIENCE THE POWER OF ARTIFICIAL INTELLIGENCE WORKING FOR YOUR FINANCIAL WELL BEING".
════════════════════════════════════════
CARDS ROW
A FLEX ROW, GAP 16, ALIGN-ITEMS STRETCH, MAX-WIDTH 1200, MARGIN 0 AUTO.
ALL THREE CARDS: FLEX 1 (EQUAL WIDTH), MIN-HEIGHT 560, BORDER-RADIUS 24, OVERFLOW HIDDEN, POSITION RELATIVE.
ALL THREE CARDS SHARE THE SAME ENTRY ANIMATION PATTERN: INITIAL = { OPACITY: 0, Y: 40 } ANIMATE (WHEN ISINVIEW) = { OPACITY: 1, Y: 0 } TRANSITION = { DURATION: 0.7, EASE: "EASEOUT", DELAY: … } CARD 1 DELAY 0.2, CARD 2 DELAY 0.35, CARD 3 DELAY 0.5.
ALL THREE CARDS SHARE A COMMON BOTTOM TITLE/DESCRIPTION BLOCK THAT IS ABSOLUTELY POSITIONED AT BOTTOM 28, LEFT 24, RIGHT 24, Z-INDEX 2. THE TITLE IS 'INSTRUMENT SERIF' ITALIC, SIZE 26, WEIGHT 400, COLOR #FFF, MARGIN-BOTTOM 8. THE DESCRIPTION IS 'INTER TIGHT', SIZE 13, COLOR RGBA(255,255,255,0.65), LINE-HEIGHT 1.6.
════════════════════════════════════════
CARD 1 - NATURAL LANGUAGE QUERIES
BACKGROUND IMAGE IS HTTPS://QCLAY.DESIGN/LOVABLE/SYNERGY/BACK-3-1.PNG AS AN ABSOLUTE IMG, INSET 0, WIDTH AND HEIGHT 100%, OBJECT-FIT COVER, Z-INDEX 0. OVERLAY DIV ON TOP, ABSOLUTE INSET 0, Z-INDEX 1, BACKGROUND RGBA(0,0,0,0.30).
GLASS UI CARD SITS IN THE UPPER AREA. POSITION ABSOLUTE, TOP 32, LEFT 24, RIGHT 24, Z-INDEX 2. BORDER-RADIUS 20, BORDER 1PX SOLID RGBA(255,255,255,0.20), BACKGROUND RGBA(255,255,255,0.10), BACKDROP-FILTER BLUR(56PX) AND -WEBKIT-BACKDROP-FILTER BLUR(56PX), PADDING 20.
HEADER ROW INSIDE THE GLASS CARD: DISPLAY FLEX, ALIGN-ITEMS CENTER, GAP 10, MARGIN-BOTTOM 16. LEFT: A 40X40 WHITE SQUARE, BORDER-RADIUS 12, FLEX CENTERED, CONTAINING HTTPS://QCLAY.DESIGN/LOVABLE/SYNERGY/LOGO-LOV.SVG WIDTH 22 WITH FILTER INVERT(1) SO THE MARK RENDERS BLACK ON WHITE. RIGHT: SPAN "SYNERGEUS", 'INTER TIGHT', SIZE 16, WEIGHT 500, COLOR #FFF.
DIVIDER: 1PX DASHED RGBA(255,255,255,0.20), MARGIN-BOTTOM 16.
ROTATING QUESTION/ANSWER BLOCK. A RELATIVE CONTAINER WITH HEIGHT 160. INSIDE, ANIMATEPRESENCE WITH MODE "WAIT" WRAPS A MOTION.DIV KEYED BY QIDX (THE CURRENT QUESTION INDEX IN STATE). ON EACH CYCLE: EXIT = { OPACITY: 0, FILTER: "BLUR(8PX)", Y: -6 } INITIAL = { OPACITY: 0, FILTER: "BLUR(8PX)", Y: 8 } ANIMATE = { OPACITY: 1, FILTER: "BLUR(0PX)", Y: 0 } TRANSITION = { DURATION: 0.6, EASE: [0.22, 1, 0.36, 1] } STYLE: POSITION ABSOLUTE, INSET 0. A USEEFFECT RUNS SETINTERVAL EVERY 4000MS THAT INCREMENTS QIDX MODULO QUESTIONS.LENGTH.
THE QUESTIONS ARRAY HAS THREE ENTRIES (Q AND A STRINGS):
Q "CAN I AFFORD TO INVEST $500 THIS MONTH?", A "BASED ON YOUR CURRENT INCOME AND EXPENSES, YOU'LL HAVE AROUND $620 IN AVAILABLE BALANCE AFTER BILLS. INVESTING $500 IS WITHIN REACH - BUT CONSIDER SAVING AT LEAST $200 AS AN EMERGENCY BUFFER."
Q "WHEN WILL I REACH MY SAVINGS GOAL?", A "AT YOUR CURRENT SAVINGS RATE OF $850/MONTH, YOU'LL REACH YOUR $10,000 GOAL IN APPROXIMATELY 8 MONTHS. CUTTING DISCRETIONARY SPENDING BY 15% COULD SHAVE OFF 3 WEEKS."
Q "HOW MUCH DID I SPEND ON FOOD LAST MONTH?", A "YOU SPENT $643 ON FOOD IN MARCH - $421 ON GROCERIES AND $222 ON DINING OUT. THAT'S 18% ABOVE YOUR MONTHLY FOOD BUDGET OF $545."
INSIDE EACH ROTATING SLIDE: THE QUESTION TEXT: 'INTER TIGHT', SIZE 16, WEIGHT 500, COLOR #FFF, MARGIN-BOTTOM 12, LINE-HEIGHT 1.4. THE ANSWER BLOCK: FLEX ROW, GAP 8, ALIGN-ITEMS FLEX-START. THE ANSWER ICON: 20X20, BORDER-RADIUS 6, BACKGROUND RGBA(255,255,255,0.15), FLEX CENTERED, FLEX-SHRINK 0, CONTAINS HTTPS://QCLAY.DESIGN/LOVABLE/SYNERGY/LOGO-LOV.SVG WIDTH 12 WITH OPACITY 0.8. THE ANSWER TEXT: 'INTER TIGHT', SIZE 12, WEIGHT 400, LINE-HEIGHT 1.6, COLOR RGBA(255,255,255,0.55).
GLASS CARD BOTTOM ROW: DISPLAY FLEX, ALIGN-ITEMS CENTER, JUSTIFY-CONTENT SPACE-BETWEEN, MARGIN-TOP 16. LEFT: A "VIEW TRANSACTION" PILL BUTTON. DISPLAY FLEX, ALIGN-ITEMS CENTER, GAP 8, BACKGROUND #FFF, COLOR #000, 'INTER TIGHT', SIZE 13, WEIGHT 500, PADDING "6PX 6PX 6PX 16PX", BORDER-RADIUS 9999, BORDER NONE, CURSOR POINTER. TRAILING BADGE: A 22X22 BLACK CIRCLE (BORDER-RADIUS 50%, BACKGROUND #000), FLEX CENTERED, CONTAINING LUCIDE ARROWUPRIGHT SIZE 12 COLOR #FFF. RIGHT: AN "ASK YOURS" ANCHOR. 'INTER TIGHT', SIZE 13, WEIGHT 500, COLOR RGBA(255,255,255,0.80), TEXT-DECORATION UNDERLINE, CURSOR POINTER.
CARD 1 BOTTOM BLOCK: TITLE "NATURAL LANGUAGE QUERIES" AND DESCRIPTION "ASK QUESTIONS ABOUT YOUR FINANCES IN PLAIN ENGLISH AND GET INSTANT, ACCURATE ANSWERS." BOTH STYLED PER THE SHARED BOTTOM BLOCK RULES ABOVE.
════════════════════════════════════════
CARD 2 - PREDICTIVE ANALYSIS
BACKGROUND IMAGE HTTPS://QCLAY.DESIGN/LOVABLE/SYNERGY/BACK-3-2.PNG AS THE SAME ABSOLUTE COVER IMG, Z-INDEX 0. OVERLAY ABSOLUTE INSET 0 Z-INDEX 1 BACKGROUND RGBA(0,0,0,0.20). NOTE THIS IS LIGHTER THAN CARD 1'S OVERLAY SO THE GREEN LANDSCAPE SHOWS THROUGH.
WHITE ROUNDED INFO BLOCK SITS IN THE UPPER AREA. OUTER WRAPPER: POSITION ABSOLUTE, TOP 32, LEFT 24, RIGHT 24, Z-INDEX 2. INNER BLOCK: BORDER-RADIUS 20, BACKGROUND RGBA(255,255,255,0.92), PADDING "24PX 20PX 20PX", TEXT-ALIGN CENTER.
TWO-LINE LABEL AT TOP: 'INTER TIGHT', SIZE 12, WEIGHT 400, COLOR RGBA(0,0,0,0.50), LINE-HEIGHT 1.5, MARGIN-BOTTOM 4. TEXT "EXPENSES" THEN A THEN "EXPECTED TO RISE".
BIG NUMBER "3%": 'INSTRUMENT SERIF' ITALIC, SIZE 52, WEIGHT 400, COLOR #000, LETTER-SPACING -1PX, LINE-HEIGHT 1.
SPACER DIV HEIGHT 16 BETWEEN THE NUMBER AND THE CHART, SO THE CHART DOESN'T CROWD THE NUMBER.
CHART CONTAINER: A DIV WITH WIDTH 280, MAX-WIDTH 100%, HEIGHT 145, POSITION RELATIVE, OVERFLOW VISIBLE, MARGIN 0 AUTO. THE FIXED 280 WIDTH MATCHES THE NATURAL WIDTH OF THE TIP PILL BELOW SO THE CHART VISUALLY ALIGNS WITH IT. INSIDE: AN SVG WITH VIEWBOX "60 -25 220 145", WIDTH 100%, HEIGHT 100%, PRESERVEASPECTRATIO NONE, STYLE OVERFLOW VISIBLE. THE NEGATIVE Y IN THE VIEWBOX GIVES SPACE ABOVE THE CHART FOR THE FLOATING GREEN DOT AND CONNECTOR TO RENDER OUTSIDE THE NATURAL CHART AREA.
SVG DEFS: A LINEARGRADIENT ID "AREAFILL" GOING TOP-TO-BOTTOM, FROM RGBA(180,210,80,0.85) TO RGBA(180,210,80,0.10). A CLIPPATH ID "REVEAL" CONTAINING A MOTION.RECT AT X 60, Y -25, HEIGHT 145, ANIMATED FROM WIDTH 0 TO WIDTH 220 WITH DURATION 1.4, EASE EASEOUT, DELAY 0.3 ONCE ISINVIEW IS TRUE. THIS PRODUCES A LEFT-TO-RIGHT WIPE REVEAL OF EVERYTHING INSIDE THE CLIP GROUP.
SVG DRAWING INSIDE : FILLED AREA PATH, FILL URL(#AREAFILL): D = "M 60 75 L 150 20 L 280 28 L 280 120 L 60 120 Z" THIS SHAPE GOES UP SHARPLY FROM THE LOWER-LEFT BASELINE (60,75), PEAKS AT (150,20), DROPS SLIGHTLY TO A HIGH PLATEAU AT (280,28), THEN CLOSES DOWN TO THE CHART BASELINE AT Y 120.
TOP STROKE PATH, SAME SHAPE, NO FILL: D = "M 60 75 L 150 20 L 280 28" STROKE #8DB800, STROKE-WIDTH 3, STROKE-LINEJOIN ROUND, STROKE-LINECAP ROUND.
TWO DASHED VERTICAL GUIDE LINES AT THE LEFT AND RIGHT EDGES OF THE SHAPE: LEFT: X1 60 Y1 75 TO X2 60 Y2 120, STROKE #8DB800, STROKE-WIDTH 1, STROKE-DASHARRAY "3 3", OPACITY 0.6. RIGHT: X1 280 Y1 28 TO X2 280 Y2 120, SAME STYLE.
CONNECTOR LINE FROM THE FLOATING DOT ABOVE THE CHART DOWN TO THE CHART'S PEAK: MOTION.LINE, X1 150 Y1 -15 TO X2 150 Y2 20, STROKE #1DC47D (GREEN), STROKE-WIDTH 1.2. INITIAL = { PATHLENGTH: 0 } ANIMATE (WHEN ISINVIEW) = { PATHLENGTH: 1 } TRANSITION = { DURATION: 0.5, EASE: "EASEOUT", DELAY: 1.4 }
FLOATING GREEN DOT AT THE TOP: MOTION.CIRCLE, CX 150, CY -15, R 4.5, FILL #1DC47D. INITIAL = { SCALE: 0 } ANIMATE (WHEN ISINVIEW) = { SCALE: 1 } TRANSITION = { DURATION: 0.3, EASE: "EASEOUT", DELAY: 1.7 } STYLE TRANSFORMORIGIN "150PX -15PX" SO THE SCALE ANCHORS AT THE DOT CENTER.
TIP PILL BELOW THE CHART: BORDER-RADIUS 9999, BORDER 1PX SOLID RGBA(0,0,0,0.12), BACKGROUND RGBA(255,255,255,0.80), BACKDROP-FILTER BLUR(8PX), PADDING "8PX 16PX", MARGIN-TOP 16, DISPLAY INLINE-BLOCK, 'INTER TIGHT', SIZE 11, COLOR RGBA(0,0,0,0.60), TEXT-ALIGN CENTER. TEXT "TIP: REDUCE SUBSCRIPTIONS TO MAINTAIN SAVINGS TARGET."
CARD 2 BOTTOM BLOCK: TITLE "PREDICTIVE ANALYSIS" AND DESCRIPTION "AI ALGORITHMS ANALYZE PATTERNS TO FORECAST FUTURE EXPENSES AND INCOME TRENDS." STANDARD SHARED BOTTOM BLOCK STYLING.
════════════════════════════════════════
CARD 3 - SMART CATEGORIZATION
BACKGROUND HTTPS://QCLAY.DESIGN/LOVABLE/SYNERGY/BACK-3-3.PNG AS A COVER IMG Z-INDEX 0. OVERLAY ABSOLUTE INSET 0 Z-INDEX 1 BACKGROUND RGBA(0,0,0,0.30).
CARD 3 RENDERS A SUB-COMPONENT CATEGORIZATIONTREE THAT DRAWS THE NODE TREE PLUS ANIMATED SVG CONNECTOR LINES PLUS TRAVELING GLOW DOTS. THE TREE WRAPPER IS ABSOLUTELY POSITIONED: TOP 32, LEFT 16, RIGHT 16, BOTTOM 110, Z-INDEX 2 (BOTTOM 110 LEAVES ROOM FOR THE TITLE/DESCRIPTION BLOCK).
THE TREE IS RENDERED AS A FLEX COLUMN INSIDE THE WRAPPER WITH DISPLAY FLEX, FLEX-DIRECTION COLUMN, ALIGN-ITEMS CENTER, GAP 18, POSITION RELATIVE, Z-INDEX 2. THERE ARE SEVEN NODE REFS TRACKED IN A REF MAP KEYED BY NODE ID: ROOT, TRANSPORT, ENTERTAINMENT, TRANSPORTDETAIL, ENTERTAINMENTDETAIL, BILLS, BILLSDETAIL.
VISUAL LAYOUT, TOP TO BOTTOM: ROW 1: NODEA "CATEGORIZATION", CENTERED. ROW 2: A FLEX ROW WITH GAP 16 CONTAINING NODEA "TRANSPORTATION" ON THE LEFT AND NODEA "ENTERTAINMENT" ON THE RIGHT. ROW 3: A FLEX ROW WITH GAP 16, ALIGN-ITEMS FLEX-START, CONTAINING NODEB "FUEL, RIDES, CAR MAINTENANCE, PUBLIC TRANSIT" AND NODEB "STREAMING SERVICES, GAMING, EVENTS". ROW 4: NODEA "BILLS AND UTILITIES", CENTERED. ROW 5: NODEB "ELECTRICITY, WATER, GAS, INTERNET, PHONE", CENTERED.
NODEA, THE GLASS ITALIC PILL (FORWARDREF SO THE TREE CAN MEASURE ITS DOM RECT): MOTION.DIV WITH INITIAL { OPACITY: 0, SCALE: 0.85 }, ANIMATE WHEN ISINVIEW { OPACITY: 1, SCALE: 1 }, TRANSITION { DURATION: 0.45, EASE: "EASEOUT", DELAY }. STYLE: BORDER-RADIUS 9999, BORDER 1PX SOLID RGBA(255,255,255,0.25), BACKGROUND RGBA(255,255,255,0.10), BACKDROP-FILTER BLUR(20PX) AND -WEBKIT EQUIVALENT, PADDING "10PX 20PX", 'INSTRUMENT SERIF' ITALIC, SIZE 16, COLOR #FFF, DISPLAY INLINE-BLOCK, WHITE-SPACE NOWRAP. PER-NODE DELAYS: ROOT 0, TRANSPORT 0.18, ENTERTAINMENT 0.36, BILLS 0.9.
NODEB, THE WHITE DETAIL CARD (ALSO FORWARDREF): SAME MOTION ENTRY AS NODEA (OPACITY 0 -> 1, SCALE 0.85 -> 1, DURATION 0.45, EASEOUT, WITH ITS OWN DELAY). STYLE: BORDER-RADIUS 12, BACKGROUND RGBA(255,255,255,0.92), PADDING "10PX 16PX", 'INTER TIGHT', SIZE 12, WEIGHT 400, COLOR RGBA(0,0,0,0.75), LINE-HEIGHT 1.5, DISPLAY INLINE-BLOCK, MAX-WIDTH 160. PER-NODE DELAYS: TRANSPORTDETAIL 0.54, ENTERTAINMENTDETAIL 0.72, BILLSDETAIL 1.08.
CONNECTOR MEASUREMENT AND SVG: A USELAYOUTEFFECT RUNS MEASURE() AFTER LAYOUT. MEASURE() READS THE CONTAINER'S BOUNDING RECT AND EACH NODE'S BOUNDING RECT AND STORES, FOR EVERY NODE, ITS TOP-CENTER POINT (TOPX, TOPY) AND BOTTOM-CENTER POINT (BOTX, BOTY) IN CONTAINER-LOCAL COORDINATES. A RESIZEOBSERVER ON THE CONTAINER PLUS A WINDOW RESIZE LISTENER RE-MEASURE ON SIZE CHANGES.
THE CONNECTORS ARE DEFINED IN AN ARRAY OF { FROM, TO, DELAY }: { ROOT -> TRANSPORT, DELAY 0.25 } { ROOT -> ENTERTAINMENT, DELAY 0.4 } { TRANSPORT -> TRANSPORTDETAIL, DELAY 0.6 } { ENTERTAINMENT -> ENTERTAINMENTDETAIL, DELAY 0.78 } { ROOT -> BILLS, DELAY 0.95 } { BILLS -> BILLSDETAIL, DELAY 1.15 }
AN SVG OVERLAY SITS ABSOLUTELY AT TOP 0 LEFT 0 WITH WIDTH AND HEIGHT EQUAL TO THE MEASURED CONTAINER SIZE, POINTER-EVENTS NONE, Z-INDEX 1 (BEHIND THE NODES WHICH ARE Z-INDEX 2). FOR EACH CONNECTION IT RENDERS THREE THINGS INSIDE A :
A MOTION.PATH THAT DRAWS A SMOOTH S-CURVE FROM THE PARENT'S BOTTOM POINT (X1,Y1) TO THE CHILD'S TOP POINT (X2,Y2). THE PATH USES A CUBIC BEZIER WITH TWO CONTROL POINTS AT THE VERTICAL MIDPOINT: D = M ${X1} ${Y1} C ${X1} ${MIDY}, ${X2} ${MIDY}, ${X2} ${Y2} WHERE MIDY = (Y1+Y2)/2. STROKE RGBA(255,255,255,0.35), STROKE-WIDTH 1, FILL NONE. INITIAL { PATHLENGTH: 0, OPACITY: 0 } ANIMATE (WHEN ISINVIEW) { PATHLENGTH: 1, OPACITY: 1 } TRANSITION { DURATION: 0.5, EASE: "EASEOUT", DELAY } THE PATH HAS A UNIQUE ID "TREE-PATH-{I}" SO THE TRAVELING DOT CAN REFERENCE IT.
A MOTION.CIRCLE "ENDPOINT DOT" AT THE CHILD'S TOP POINT (CX X2, CY Y2), R 2.5, FILL RGBA(255,255,255,0.9). IT FADES IN WITH INITIAL { OPACITY: 0 }, ANIMATE { OPACITY: 1 }, TRANSITION { DURATION: 0.3, DELAY: DELAY + 0.5 }. THIS CREATES THE SMALL WHITE MARKER EXACTLY WHERE THE LINE MEETS THE CHILD NODE.
A TRAVELING GLOW DOT THAT LOOPS ALONG THE CONNECTOR PATH FOREVER. IT IS A MOTION.CIRCLE R 3, FILL #FFF, WITH STYLE FILTER "DROP-SHADOW(0 0 4PX RGBA(255,255,255,0.8))" SO IT GLOWS. THE FRAMER-MOTION ANIMATION ONLY FADES IT IN: INITIAL { OPACITY: 0 } ANIMATE (WHEN ISINVIEW) { OPACITY: [0, 1, 1, 0] } TRANSITION { DURATION: 2.4, DELAY: DELAY + 0.6, REPEAT: INFINITY, REPEATDELAY: 1.2, EASE: "EASEINOUT", TIMES: [0, 0.1, 0.9, 1] } THE MOTION ALONG THE PATH IS DONE WITH NATIVE SVG INSIDE THE CIRCLE: . SO EACH CONNECTOR HAS A GLOWING WHITE DOT THAT TRAVELS FROM THE PARENT NODE DOWN ITS CURVE TO THE CHILD NODE, FADES OUT, THEN LOOPS AFTER A 1.2S PAUSE.
CARD 3 BOTTOM BLOCK: TITLE "SMART CATEGORIZATION" AND DESCRIPTION "AUTOMATICALLY CATEGORIZE TRANSACTIONS WITH MACHINE LEARNING THAT IMPROVES OVER TIME." STANDARD SHARED BOTTOM BLOCK STYLING.
════════════════════════════════════════
ANIMATION TIMELINE, IN FIRING ORDER ONCE ISINVIEW FLIPS TRUE
T = 0.0S H2 BLUR-IN STARTS (12PX -> 0, Y 30 -> 0, OPACITY 0 -> 1, 0.8S EASEOUT) T = 0.2S SUBTEXT BLUR-IN STARTS (8PX -> 0, Y 20 -> 0, 0.8S EASEOUT) T = 0.2S CARD 1 SLIDES UP + FADES IN (Y 40 -> 0, OPACITY 0 -> 1, 0.7S EASEOUT) T = 0.35S CARD 2 SLIDES UP + FADES IN T = 0.3S CARD 2 CHART WIPE REVEAL STARTS (CLIPPATH RECT WIDTH 0 -> 220, 1.4S EASEOUT) T = 0.5S CARD 3 SLIDES UP + FADES IN T = 0.45S TREE NODEA "CATEGORIZATION" POPS IN (SCALE 0.85 -> 1, OPACITY 0 -> 1, 0.45S EASEOUT, BASE DELAY 0) T = 0.63S NODEA "TRANSPORTATION" (DELAY 0.18) T = 0.70S TREE CONNECTOR ROOT -> TRANSPORT DRAWS (PATHLENGTH 0 -> 1, 0.5S EASEOUT, DELAY 0.25) T = 0.81S NODEA "ENTERTAINMENT" (DELAY 0.36) T = 0.85S TREE CONNECTOR ROOT -> ENTERTAINMENT DRAWS T = 0.99S NODEB TRANSPORTDETAIL (DELAY 0.54) T = 1.05S CONNECTOR TRANSPORT -> TRANSPORTDETAIL T = 1.17S NODEB ENTERTAINMENTDETAIL (DELAY 0.72) T = 1.20S ENDPOINT DOT AT TRANSPORT'S CHILD APPEARS (DELAY 0.6 + 0.5) T = 1.23S CONNECTOR ENTERTAINMENT -> ENTERTAINMENTDETAIL T = 1.30S CARD 2 CONNECTOR LINE DOT -> PEAK DRAWS (0.5S, DELAY 1.4 FROM ISINVIEW) T = 1.35S NODEA "BILLS AND UTILITIES" (DELAY 0.9) T = 1.40S CONNECTOR ROOT -> BILLS T = 1.53S NODEB BILLSDETAIL (DELAY 1.08) T = 1.60S CARD 2 FLOATING GREEN DOT SCALES IN (0.3S, DELAY 1.7) T = 1.60S CONNECTOR BILLS -> BILLSDETAIL AFTER ALL CONNECTORS FINISH, THE TRAVELING GLOW DOTS LOOP FOREVER ALONG EACH CONNECTOR (2.4S DURATION, 1.2S REPEAT DELAY, STAGGERED BY THEIR CONNECTOR DELAY).
LOOPING ANIMATIONS THAT NEVER STOP
CARD 1 QUESTION ROTATION: SETINTERVAL EVERY 4000MS CYCLES QIDX THROUGH THE 3 QUESTIONS. EACH TRANSITION IS EXIT BLUR-OUT (0.6S) THEN A NEW ENTRY BLUR-IN (0.6S) VIA ANIMATEPRESENCE MODE "WAIT". THIS IS INTENTIONALLY SOFT, NO CLIP-PATH MASKS, NO SHARP EDGES.
CARD 3 TRAVELING GLOW DOTS: EACH CONNECTOR HAS ITS OWN INFINITE ANIMATEMOTION PLUS FRAMER-MOTION OPACITY LOOP. THE RESULT IS A CONTINUOUS FLOW OF LIGHT FROM PARENT NODES DOWN TO THEIR CHILDREN, COMMUNICATING "DATA FLOWING THROUGH THE CATEGORIZATION TREE".
LAYOUT CONSTANTS WORTH REPEATING
CARDS: FLEX 1, MIN-HEIGHT 560, BORDER-RADIUS 24, OVERFLOW HIDDEN. BOTTOM TITLE/DESCRIPTION BLOCK ON EVERY CARD: POSITION ABSOLUTE, BOTTOM 28, LEFT 24, RIGHT 24, Z-INDEX 2, SO TITLES ALIGN HORIZONTALLY ACROSS ALL THREE CARDS REGARDLESS OF UPPER CONTENT HEIGHT. CARD 2 CHART CONTAINER WIDTH 280 MATCHES THE NATURAL WIDTH OF THE TIP PILL SO THE CHART AND PILL SHARE A VISUAL COLUMN.
COLOR REFERENCE
BACKGROUND BLACK #000. CARD OVERLAYS RGBA(0,0,0,0.30) FOR CARD 1 AND CARD 3, RGBA(0,0,0,0.20) FOR CARD 2. WHITE TEXT FULL OPACITY #FFF FOR HEADINGS. WHITE TEXT 0.60 ALPHA FOR SUBTEXT, 0.65 FOR CARD DESCRIPTIONS, 0.55 FOR CARD 1 ANSWER BODY, 0.80 FOR "ASK YOURS". GLASS SURFACES: BACKGROUND RGBA(255,255,255,0.10) WITH BLUR(56PX) FOR CARD 1'S MAIN GLASS, BLUR(20PX) FOR CARD 3 NODEA PILLS. WHITE CONTENT CARDS: RGBA(255,255,255,0.92) FOR CARD 2'S WHITE BLOCK, CARD 3 NODEB CARDS, AND THE TIP PILL IS RGBA(255,255,255,0.80). GREEN ACCENTS: #1DC47D FOR THE DOT AND CONNECTOR IN CARD 2, #8DB800 FOR THE CHART STROKE AND DASHED GUIDES, FILL GRADIENT RGBA(180,210,80,0.85) -> RGBA(180,210,80,0.10).
THAT IS THE COMPLETE SPEC FOR SECTION 3 - EVERY TEXT STRING, COLOR, FONT, SIZE, ANIMATION TIMING, EASING CURVE, ASSET PATH, LAYOUT CONSTANT, SCROLL TRIGGER, LOOPING BEHAVIOR, AND SVG CONSTRUCTION.
Source & license
Vendored from MIT-licensed
pulkitxm/claude-directory.
The upstream MIT licence text ships in this template at LICENSE and
must be redistributed alongside any copy of example.html or assets/.
Webfonts and full-resolution imagery are not vendored: local @font-face
rules are served from the Google Fonts CDN and referenced images are
downscaled. Fetch the upstream folder for the original assets.