ZeroSum-Solutions/mishmash

GroundAI — Interior Design AI Landing Page

Landing page vendored from the MIT-licensed pulkitxm/claude-directory gallery.

A single-page landing page for GroundAI, an interior-design AI product, built with TanStack Start v1 on file-based routing, React 19, TypeScript, Tailwind CSS v4, framer-motion for all animation, and lucide-react for icons. The page is composed of four stacked sections: a full-bleed autoplaying video hero with spring-animated header, expanding glass nav pill, and word-by-word animated description; a CSS marquee of partner brand wordmarks; a CraftExperiences section with a spring-driven style carousel, a skeleton-morphing chat card, and a staggered adaptable list; and a two-column testimonials block with animated word reveals.

Workflow

1. Clone example.html into the user's workspace as the working file.
2. Replace placeholder content with the user's real brand name, headlines, body copy, numbers, and imagery. Match existing image dimensions when swapping assets.
3. 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.
4. 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.
5. Keep motion accessible. Every animation must stay behind prefers-reduced-motion, as the build spec requires.

Output contract

Emit between <artifact> tags:

<artifact identifier="groundai-landing" type="text/html" title="GroundAI — Interior Design AI Landing Page">
<!doctype html>
<html>...</html>
</artifact>

Build spec

The upstream prompt that produced this design, verbatim.

GROUNDAI LANDING PAGE

BUILD A SINGLE-PAGE TANSTACK START V1 LANDING PAGE FOR A PRODUCT CALLED "GROUNDAI" (INTERIOR DESIGN AI). USE REACT 19, TYPESCRIPT, TAILWIND V4, FRAMER-MOTION AND LUCIDE-REACT. PAGE LIVES AT SRC/ROUTES/INDEX.TSX AND IS COMPOSED OF FOUR STACKED SECTIONS IN THIS EXACT ORDER: HERO, TRUSTEDBY, CRAFTEXPERIENCES, TESTIMONIALS.

ASSETS

CREATE SRC/LIB/ASSETS.TS THAT EXPORTS A SINGLE OBJECT A WITH A BASE CONSTANT EQUAL TO "HTTPS://QCLAY.DESIGN/LOVABLE/GROUNDAI" AND THESE KEYS, EACH VALUE BEING ${BASE}/<FILENAME>:

• HERO=HERO1.MP4
• BACKGROUNDCARD=BACKGROUNDCARD.PNG
• BOTTOMWONEM=BOTTOMWONEM.PNG
• WOMEM=WOMEM.PNG
• LOGO=LOGO.SVG
• ARROWUP=ARROWUP.SVG
• GREENFLAG=GREENFLAG.SVG
• NUERAL=NUERAL.SVG
• ORINYA=ORINYA.SVG
• SKODIA=SKODIA.SVG
• SKODIASKODIA=SKODIASKODIA.SVG
• WIDS=WIDS.SVG
• XYREION=XYREION.SVG

REFERENCE EVERY IMAGE/VIDEO THROUGH THIS A OBJECT ONLY.

FONTS

IN THE ROUTE HEAD(), INJECT A STYLESHEET LINK TO HTTPS://FONTS.GOOGLEAPIS.COM/CSS2?FAMILY=INTER+TIGHT:WGHT@400;500&FAMILY=PLAYFAIR+DISPLAY:ITAL@1&DISPLAY=SWAP. THREE FONT FAMILIES ARE USED INLINE VIA STYLE FONTFAMILY: "'INTER TIGHT', SANS-SERIF" FOR HEADINGS AND BRAND WORDMARK, "'PLAYFAIR DISPLAY', SERIF" ITALIC FOR ACCENT WORDS, AND "'SF PRO ROUNDED', SYSTEM-UI, SANS-SERIF" FOR BUTTONS/BODY. BRAND LOGOS IN TRUSTEDBY/TESTIMONIALS USE "'SATOSHI', SYSTEM-UI, SANS-SERIF".

HEAD/META

TITLE "GROUNDAI — REDEFINE SPACE WITH INTELLIGENT DESIGN"; DESCRIPTION AND OG:TITLE/OG:DESCRIPTION "GROUNDAI HELPS YOU IMAGINE, PLAN, AND REFINE SPACES THROUGH NATURAL CONVERSATIONS."

GLOBAL CSS

IN SRC/STYLES.CSS APPEND AT THE END:

@KEYFRAMES MARQUEE { 0% { TRANSFORM: TRANSLATEX(0); } 100% { TRANSFORM: TRANSLATEX(-50%); } } .ANIMATE-MARQUEE { ANIMATION: MARQUEE 35S LINEAR INFINITE; }

HERO SECTION (INSIDE INDEX.TSX)

A RELATIVE FULL-VIEWPORT SECTION: CLASSNAME "RELATIVE MIN-H-SCREEN W-FULL TEXT-WHITE FLEX FLEX-COL JUSTIFY-BETWEEN P-6 MD:P-12 OVERFLOW-HIDDEN". FIRST CHILD IS A <VIDEO> FOLLOWED BY AN ABSOLUTE OVERLAY DIV CLASSNAME "ABSOLUTE INSET-0 BG-BLACK/20 Z-0".

HEADER (MOTION.HEADER) ANIMATES INITIAL {Y:"45VH", OPACITY:0} TO {Y:0, OPACITY:1} OVER 1S WITH EASE [0.22,1,0.36,1]. CLASSNAME "W-FULL MAX-W-[1360PX] MX-AUTO FLEX JUSTIFY-BETWEEN ITEMS-CENTER Z-20 RELATIVE". LEFT: A DIV FLEX ITEMS-CENTER GAP-[20PX] CONTAINING <IMG LOGO> AND SPAN "GROUNDAI" TEXT-WHITE TEXT-3XL FONT-MEDIUM IN INTER TIGHT. RIGHT (DESKTOP, HIDDEN LG:FLEX): A MOTION.NAV WITH LAYOUT, INITIAL WIDTH 110 ANIMATING TO "AUTO" WITH 0.8S DURATION DELAY 1.1 SAME EASING, WILLCHANGE WIDTH, CLASSNAME "BG-BLACK/40 BACKDROP-BLUR-LG ROUNDED-3XL ITEMS-CENTER OVERFLOW-HIDDEN H-[64PX] FLEX-ROW-REVERSE". INSIDE, FIRST (RENDERED ON RIGHT DUE TO ROW-REVERSE) A P-1.5 WRAPPER WITH A WHITE PILL BUTTON H-12 PX-6 ROUNDED-FULL TEXT-BLACK TEXT-XL FONT-MEDIUM "LOGIN" (SF PRO ROUNDED), HOVER BG-NEUTRAL-100. THEN A MOTION.DIV FADING IN (OPACITY 0→1 DELAY 1.5 DURATION 0.5) CLASSNAME "FLEX ITEMS-CENTER GAP-8 PL-8 PR-2 WHITESPACE-NOWRAP" WITH FOUR ANCHORS TEXT-WHITE TEXT-BASE OPACITY-90 HOVER:OPACITY-100: PRODUCT, PLATFORM, CUSTOMERS, COMPANY.

MOBILE (LG:HIDDEN) TOGGLE BUTTON: W-12 H-12 ROUNDED-FULL BG-BLACK/40 BACKDROP-BLUR-LG FLEX CENTER, ICON MENU/X FROM LUCIDE-REACT TOGGLED VIA USESTATE. ANIMATEPRESENCE WRAPS A DROPDOWN MOTION.DIV SHOWN WHEN OPEN: INITIAL {OPACITY:0,Y:-10} ANIMATE {OPACITY:1,Y:0} EXIT SAME, CLASSNAME "ABSOLUTE TOP-FULL RIGHT-0 MT-3 W-60 BG-BLACK/70 BACKDROP-BLUR-LG ROUNDED-2XL P-4 FLEX FLEX-COL GAP-3" CONTAINING THE SAME FOUR LINKS PLUS A WHITE PILL LOGIN BUTTON H-11.

CENTER HERO CONTENT: DIV CLASSNAME "W-FULL MAX-W-[800PX] MX-AUTO FLEX FLEX-COL JUSTIFY-CENTER ITEMS-CENTER GAP-6 MD:GAP-8 TEXT-CENTER MY-AUTO Z-10 PX-4". H1 TEXT-WHITE TEXT-[40PX] SM:TEXT-[52PX] MD:TEXT-[64PX] FONT-NORMAL LEADING-[1.1] MD:LEADING-[1.02] INTER TIGHT, COMPOSED OF THREE MOTION.SPAN BLOCKS EACH INITIAL {OPACITY:0,Y:12} ANIMATE {OPACITY:1,Y:0} DELAYS 0.3/0.5/0.7 DURATION 0.6: LINE1 "MEET GROUNDAI."; LINE2 CONTAINS ITALIC PLAYFAIR "REDEFINE SPACE" + NON-ITALIC INTER TIGHT "WITH"; LINE3 "INTELLIGENT DESIGN". AFTER H1 A MOTION.BUTTON INITIAL {OPACITY:0,Y:10} ANIMATE DELAY 1.0 DURATION 0.5, CLASSNAME "H-12 MD:H-14 PX-6 MD:PX-8 PY-3 BG-WHITE ROUNDED-2XL INLINE-FLEX JUSTIFY-CENTER ITEMS-CENTER TEXT-BLACK TEXT-LG MD:TEXT-XL FONT-MEDIUM HOVER:BG-NEUTRAL-200 TRANSITION-COLORS SHADOW-LG MT-2 MD:MT-0" SF PRO ROUNDED, LABEL "START FREE DECORATION".

HERO FOOTER: FOOTER CLASSNAME "W-FULL MAX-W-[1360PX] MX-AUTO FLEX FLEX-COL MD:FLEX-ROW JUSTIFY-BETWEEN ITEMS-START MD:ITEMS-END GAP-6 Z-10". LEFT COLUMN W-FULL MD:W-[480PX] MAX-W-PROSE TEXT-WHITE/80 TEXT-XL LEADING-[1.25] TEXT-LEFT RENDERS AN ANIMATEDWORDS HELPER (SPLITS TEXT ON SPACES, EACH WORD BECOMES A MOTION.SPAN INITIAL {OPACITY:0,Y:10} ANIMATE {OPACITY:1,Y:0} TRANSITION DELAY = BASEDELAY + I*0.045, DURATION 0.5 EASEOUT, INLINE-BLOCK MR-[0.25EM]) WITH BASEDELAY 1.2 AND TEXT = "IT HELPS YOU IMAGINE, PLAN, AND REFINE SPACES THROUGH NATURAL CONVERSATIONS. FROM CHOOSING COLORS AND LAYOUTS TO SUGGESTING FURNITURE AND DÉCOR, IT ADAPTS TO YOUR TASTE."

RIGHT COLUMN MOTION.DIV INITIAL {OPACITY:0,Y:20} ANIMATE DELAY 1.4 DURATION 0.6, CLASSNAME "FLEX FLEX-ROW FLEX-WRAP LG:FLEX-COL ITEMS-CENTER LG:ITEMS-END GAP-2.5 W-FULL MD:W-AUTO JUSTIFY-END". CONTAINS A PILL DIV H-[56PX] PX-5 ROUNDED-2XL BORDER BORDER-WHITE/40 TEXT-WHITE TEXT-XL WHITESPACE-NOWRAP CENTERED SF PRO ROUNDED READING "SOLUTIONS FOR COMPLEX SPACES". THEN A ROW FLEX ITEMS-CENTER GAP-2 WITH A 56X56 ROUNDED-2XL BORDER-WHITE/40 SQUARE CONTAINING <IMG ARROWUP> FOLLOWED BY ANOTHER IDENTICAL PILL "CONVERSATIONAL & ACTION".

TRUSTEDBY COMPONENT (SRC/COMPONENTS/TRUSTEDBY.TSX)

SECTION BG-WHITE PT-16 PB-14 PX-[40PX]. H2 TEXT-CENTER TEXT-3XL MD:TEXT-4XL FONT-MEDIUM TEXT-NEUTRAL-900 MB-12 INTER TIGHT "TRUSTED BY THE " + ITALIC PLAYFAIR "LEADING BRANDS". BELOW, RELATIVE OVERFLOW-HIDDEN WRAPPER WITH TWO POINTER-EVENTS-NONE ABSOLUTE GRADIENTS LEFT (W-16 FROM-WHITE TO-TRANSPARENT) AND RIGHT (MIRRORED) Z-10. INSIDE A DIV CLASSNAME "FLEX W-MAX ANIMATE-MARQUEE GAP-16" RENDERING [...BRANDS, ...BRANDS] WHERE BRANDS ARRAY IS: {NUERAL, A.NUERAL}, {GROUNDAI, NULL}, {WIDS, A.WIDS}, {ORINYA, A.ORINYA}, {XYREION, A.XYREION}, {SKODIA, A.SKODIA}, {GREENFLAG, A.GREENFLAG}. EACH ITEM: FLEX ITEMS-CENTER GAP-3 SHRINK-0 OPACITY-40, OPTIONAL <IMG> THEN SPAN TEXT-3XL FONT-BOLD TEXT-BLACK WHITESPACE-NOWRAP SATOSHI WITH THE BRAND NAME.

CRAFTEXPERIENCES COMPONENT (SRC/COMPONENTS/CRAFTEXPERIENCES.TSX)

SECTION BG-WHITE. INNER CONTAINER MAX-W-[1360PX] MX-AUTO PX-6 MD:PX-12 PT-16 PB-20. TITLE H2 TEXT-CENTER TEXT-5XL MD:TEXT-6XL FONT-NORMAL LEADING-[1.1] MB-12 TEXT-NEUTRAL-900 INTER TIGHT: ITALIC PLAYFAIR "CRAFT EXPERIENCES" + " YOUR" + <BR> + "CUSTOMERS WILL REMEMBER". BELOW A FLEX FLEX-COL LG:FLEX-ROW JUSTIFY-BETWEEN ITEMS-STRETCH GAP-6 WITH THREE CARDS. EACH CARD WRAPPED IN MOTION.DIV INITIAL {OPACITY:0,Y:40} WHILEINVIEW {OPACITY:1,Y:0} VIEWPORT {ONCE:TRUE, AMOUNT:0.2} TRANSITION DELAY I*0.35 DURATION 1.1 EASEOUT, CLASSNAME "FLEX FLEX-1".

CARD1 — STYLE CAROUSEL

RELATIVE FLEX-1 H-[585PX] ROUNDED-3XL OVERFLOW-HIDDEN BG-STONE-300. BACKGROUND ABSOLUTE INSET-0 BG-COVER BG-CENTER WITH BACKGROUNDIMAGE URL(A.BACKGROUNDCARD); OVERLAY ABSOLUTE INSET-0 BG-BLACK/10. CENTER WRAPPER FLEX ITEMS-CENTER JUSTIFY-CENTER HOLDS A RELATIVE W-FULL CENTERED CONTAINER OF HEIGHT 80 (ACTIVE_HEIGHT). CONSTANTS: PILL_ROW_HEIGHT=56, PILL_GAP=18, ACTIVE_HEIGHT=80, ACTIVE_GAP=22. ITEMS=["MODERN MINIMALIST","COZY SCANDINAVIAN","RUSTIC WOODEN DESIGN","BOLD INDUSTRIAL","COASTAL RETREAT","JAPANDI CALM","ART DECO LUXE"]. STATE ACTIVE STARTS AT 2, SETINTERVAL EVERY 2800MS ADVANCES ACTIVE = (ACTIVE+1) % ITEMS.LENGTH. FOR EACH ITEM COMPUTE DIFF = ((I - ACTIVE + LEN + FLOOR(LEN/2)) % LEN) - FLOOR(LEN/2); ISACTIVE = DIFF===0; VISIBLE = |DIFF|<=2; Y = DIFF===0 ? 0 : DIFF<0 ? DIFF(56+18)-22 : DIFF(56+18)+22; OPACITY = !VISIBLE ? 0 : |DIFF|===2 ? 0.55 : 1. RENDER MOTION.DIV ANIMATE {Y, OPACITY}, TRANSITION Y: SPRING STIFFNESS 260 DAMPING 28, OPACITY TWEEN EASEINOUT DURATION 0.4, ABSOLUTE LEFT-0 RIGHT-0 FLEX JUSTIFY-CENTER POINTER-EVENTS-NONE, CONTAINING <PILL>. TOP/BOTTOM BLACK/30→TRANSPARENT GRADIENT OVERLAYS H-24.

PILL COMPONENT: MOTION.DIV LAYOUT, SPRING 260/28. WHEN INACTIVE: W-[261PX] H-[56PX] PX-3 BG-WHITE/15 BACKDROP-BLUR-MD ROUNDED-FULL BORDER BORDER-WHITE/10 FLEX ITEMS-CENTER GAP-[8.5PX]; WHEN ACTIVE: W-[CALC(100%_-_60PX)] MX-[30PX] H-[80PX] BG-WHITE/25 BACKDROP-BLUR-XL SHADOW-XL WITH PADDING 8.5. LEFT CIRCLE: ROUNDED-FULL BG-WHITE/30; INACTIVE 44X44 CONTAINING INNER W-FULL H-FULL ROUNDED-FULL BG-WHITE/10; ACTIVE 63X63 CONTAINING <IMG WOMEM>, WRAPPED IN MOTION.DIV WITH LAYOUTID ICON-${LABEL}. RIGHT AREA: RELATIVE FLEX-1 H-[44PX] TEXT-LEFT ML-1 WITH TWO ABSOLUTELY POSITIONED MOTION.DIVS CROSS-FADING: ACTIVE VERSION SHOWS LABEL TEXT-WHITE TEXT-LG FONT-MEDIUM AND A SMALL CAPTION "GROUNDAI CHOICE" TEXT-WHITE/70 TEXT-[11PX] TRACKING-[0.15EM]; INACTIVE VERSION SHOWS TWO STACKED SKELETON BARS H-2 W-[140PX] BG-WHITE/50 ROUNDED-FULL AND H-2 W-[70PX] BG-WHITE/35 ROUNDED-FULL, GAP 1.5.

CARD2 — CHAT/CUSTOMER CARD

RELATIVE FLEX-1 H-[585PX] ROUNDED-3XL OVERFLOW-HIDDEN BG-[#141413] FLEX FLEX-COL PT-10 PB-10 JUSTIFY-BETWEEN. TOP AREA FLEX-1 FLEX FLEX-COL JUSTIFY-CENTER GAP-[10PX] MB-6 HOLDS TWO STACKED BUBBLES: FIRST IS A STATIC SKELETON BUBBLE — MOTION.DIV INITIAL {OPACITY:0,Y:20} ANIMATE {OPACITY:1,Y:0} DELAY 0.2 DURATION 0.6, CLASSNAME "MX-[58PX] H-[108PX] ROUNDED-2XL BG-[#FAFAFA14] FLEX ITEMS-START PT-[22PX] PL-[22PX] RELATIVE", CONTAINING A 40X40 ROUNDED-XL BG-[#FFFFFF54] SQUARE AND A COLUMN ML-[12PX] FLEX-1 FLEX FLEX-COL GAP-[9PX] PR-[22PX] WITH THREE PILLS: H-[6PX] W-[31PX] BG-[#FFFFFF3D] ROUNDED-FULL MT-[17PX], THEN W-[85%], THEN W-[55%]. SECOND BUBBLE IS MORPHBUBBLE: MOTION.DIV LAYOUT, ANIMATE BACKGROUNDCOLOR "#FAFAFA14" → "#9E948B" AFTER 1100MS TIMEOUT, TRANSITION 0.7S EASEOUT, CLASSNAME "MX-[45PX] H-[135PX] ROUNDED-3XL P-[22PX] OVERFLOW-HIDDEN RELATIVE". ANIMATEPRESENCE MODE="WAIT" SWAPS CONTENT: WHILE NOT FILLED, IDENTICAL SKELETON (40X40 + 3 BARS SAME WIDTHS) SHOWN; ONCE FILLED, RENDER A ROW FLEX ITEMS-CENTER GAP-[12PX] H-[44PX] WITH <IMG WOMEM 44X44 ROUNDED> AND "ME" TEXT-WHITE TEXT-BASE LEADING-NONE SF PRO ROUNDED, FOLLOWED BY A PARAGRAPH TEXT-WHITE TEXT-[15PX] LEADING-SNUG MT-[-9PX] ML-[56PX] SF PRO ROUNDED READING: "MY INTERIOR WON'T UPDATE, ANY IDEAS ON HOW TO USE GROUNDAI?". FADE TRANSITIONS 0.5S DELAY 0.15S FOR FILLED, 0.3S FOR SKELETON.

CARD2 BOTTOM ROW: FLEX JUSTIFY-BETWEEN ITEMS-END PL-[32PX] PR-[32PX]. LEFT: W-64 TEXT-WHITE TEXT-4XL LEADING-10 SF PRO ROUNDED WITH EACH WORD OF "ENGAGE AND DELIGHT CUSTOMERS" WRAPPED IN MOTION.SPAN INITIAL {OPACITY:0,Y:10} WHILEINVIEW {OPACITY:1,Y:0} VIEWPORT ONCE AMOUNT 0.4, DELAY 0.5+I*0.1 DURATION 0.5 EASEOUT, INLINE-BLOCK MR-[0.25EM]. RIGHT: THREE OVERLAPPING CIRCLES REPRESENTING AVATARS/STEPS, EACH W-10 H-10 ROUNDED-FULL BORDER-2 BORDER-[#141413] FLEX CENTER TEXT-XL SF PRO ROUNDED: FIRST "01" BG-[#5F5D4D] TEXT-WHITE Z-30; SECOND "2" BG-[#252522] TEXT-WHITE/40 -ML-3 Z-20; THIRD "3" SAME STYLE -ML-3 Z-10.

CARD3 — ADAPTABLE LIST

RELATIVE FLEX-1 H-[585PX] ROUNDED-3XL OVERFLOW-HIDDEN FLEX FLEX-COL PX-[33PX] PT-[44PX] PB-10 BACKGROUNDCOLOR "#9E948B". TOP: FLEX FLEX-COL GAP-[26PX]. H3 TEXT-WHITE TEXT-5XL FONT-NORMAL LEADING-[1.05] INTER TIGHT: "IT'S COMPLETELY" <BR> "ADAPTABLE.". THEN PARAGRAPH TEXT-WHITE/60 TEXT-LG LEADING-SNUG MAX-W-[340PX] SF PRO ROUNDED WITH EACH WORD OF "CUSTOMIZE GROUNDAI TO FIT YOUR STYLE AND NEEDS—WHETHER YOU WANT MODERN MINIMALISM, COZY COMFORT, OR BOLD LUXURY." WRAPPED MOTION.SPAN INITIAL {OPACITY:0,Y:8} WHILEINVIEW {OPACITY:1,Y:0} VIEWPORT ONCE AMOUNT 0.3 DELAY 0.6+I0.04 DURATION 0.4 EASEOUT INLINE-BLOCK MR-[5PX]. BOTTOM AREA MT-AUTO Z-10 WITH FLEX FLEX-COL GAP-[12PX] OF THREE ITEMS ARRAY: {"STYLE PREFERENCE","#887C71"}, {"ROOM LAYOUT RULES","#9E948B"}, {"FURNITURE & DÉCOR CHOICES","#9E948B"}. EACH MOTION.DIV INITIAL {OPACITY:0,Y:30} WHILEINVIEW {OPACITY:1,Y:0} VIEWPORT ONCE AMOUNT 0.3 DELAY 1.1+IDX0.18 DURATION 0.55 EASEOUT, CLASSNAME "W-FULL PY-[15PX] PX-[27PX] ROUNDED-2XL BG-WHITE FLEX ITEMS-CENTER JUSTIFY-BETWEEN", LEFT SPAN TEXT-LG WITH THAT COLOR SF PRO ROUNDED SHOWING LABEL, RIGHT AN INLINE SVG PLUS ICON W-[22PX] H-[22PX] TEXT-NEUTRAL-400 STROKE-WIDTH 2.5 VIEWBOX 0 0 24 24 WITH PATH D "M12 4.5V15M7.5-7.5H-15" ROUNDED LINE CAPS. OVER THE LIST PLACE A POINTER-EVENTS-NONE ABSOLUTE INSET-X-0 -BOTTOM-10 H-[140PX] -MX-4 Z-20 DIV WITH A LINEAR-GRADIENT TO TOP FROM RGBA(158,148,139,1) 0%, 1 AT 35%, 0.7 AT 65%, 0 AT 80%.

TESTIMONIALS COMPONENT (SRC/COMPONENTS/TESTIMONIALS.TSX)

SECTION BG-WHITE. INNER MAX-W-[1360PX] MX-AUTO PX-6 MD:PX-10 PY-20. OUTER MOTION.DIV INITIAL="HIDDEN" WHILEINVIEW="VISIBLE" VIEWPORT ONCE AMOUNT 0.25 TRANSITION STAGGERCHILDREN 0.18, CLASSNAME "FLEX FLEX-COL LG:FLEX-ROW JUSTIFY-BETWEEN ITEMS-STRETCH GAP-8 LG:GAP-[25PX]". DEFINE FADEUP VARIANTS HIDDEN {OPACITY:0,Y:24} VISIBLE {OPACITY:1,Y:0}.

LEFT COLUMN WRAPPER FLEX FLEX-COL LG:FLEX-ROW GAP-[25PX] ITEMS-STRETCH CONTAINS TWO MOTION.DIV VARIANTS=FADEUP DURATION 0.6 EASEOUT BLOCKS:

BLOCK A: FLEX FLEX-ROW LG:FLEX-COL JUSTIFY-BETWEEN LG:H-FULL LG:MIN-H-[447PX] GAP-4 LG:GAP-8 ITEMS-CENTER LG:ITEMS-START. INSIDE: A COLUMN FLEX FLEX-COL GAP-6 FLEX-1 LG:FLEX-NONE WITH H3 TEXT-3XL TEXT-BLACK LEADING-TIGHT MAX-W-[260PX]: MEDIUM SF PRO ROUNDED "GROUNDAI" + " " + ITALIC PLAYFAIR "CHANGED MY APPROACH". THEN A DESKTOP-ONLY FLEX ITEMS-CENTER GAP-2 DOT INDICATOR: W-8 H-2 BG-BLACK ROUNDED-FULL, W-2 H-2 BG-STONE-300 ROUNDED-FULL, W-2 H-2 BG-STONE-300 ROUNDED-FULL. BELOW THE COLUMN A MOTION.BUTTON INITIAL {OPACITY:0,Y:20} WHILEINVIEW {OPACITY:1,Y:0} VIEWPORT ONCE AMOUNT 0.4 DELAY 0.3 DURATION 0.5 EASEOUT, CLASSNAME "SELF-START BG-BLACK TEXT-WHITE PX-7 PY-3 ROUNDED-2XL TEXT-XL FONT-MEDIUM HOVER:BG-NEUTRAL-800 TRANSITION-COLORS WHITESPACE-NOWRAP" SF PRO ROUNDED LABEL "READ MORE".

BLOCK B: FLEX FLEX-COL GAP-3 W-FULL LG:W-[282PX]. FIRST CHILD DIV W-FULL H-[280PX] LG:H-[351PX] ROUNDED-2XL OVERFLOW-HIDDEN WITH <IMG BOTTOMWONEM COVER>. SECOND CHILD MOTION.DIV INITIAL {OPACITY:0,Y:20} WHILEINVIEW DELAY 0.4 DURATION 0.55 EASEOUT, CLASSNAME "W-FULL H-24 ROUNDED-2XL FLEX ITEMS-CENTER JUSTIFY-CENTER GAP-3" BACKGROUNDCOLOR "#F1F0EF", CONTAINING <IMG SKODIASKODIA> AND SPAN TEXT-3XL FONT-BOLD TEXT-BLACK SATOSHI "SKODIA".

RIGHT COLUMN MOTION.DIV VARIANTS=FADEUP DURATION 0.6 EASEOUT, CLASSNAME "MAX-W-[748PX] FLEX-1 P-10 ROUNDED-2XL FLEX FLEX-COL JUSTIFY-BETWEEN GAP-10" BACKGROUNDCOLOR "#7D756E1C". PARAGRAPH TEXT-3XL LEADING-10 TEXT-BLACK SF PRO ROUNDED; EACH WORD OF THE QUOTE "GROUNDAI COMPLETELY CHANGED HOW I APPROACHED REDESIGNING MY APARTMENT. INSTEAD OF FEELING OVERWHELMED WITH CHOICES. IT FELT LIKE HAVING A DESIGNER BY MY SIDE 24/7." IS A MOTION.SPAN INITIAL {OPACITY:0,Y:6} WHILEINVIEW {OPACITY:1,Y:0} VIEWPORT ONCE, TRANSITION DURATION 0.35 DELAY 0.4+I*0.04 EASEOUT, INLINE-BLOCK MR-[0.25EM]. BELOW THE QUOTE A MOTION.DIV INITIAL {OPACITY:0,Y:24} WHILEINVIEW DELAY 0.6 DURATION 0.6 EASEOUT, FLEX FLEX-COL GAP-1, CONTAINING ITALIC PLAYFAIR TEXT-XL TEXT-BLACK "SOPHIA MARTINEZ," AND TEXT-XL TEXT-BLACK/50 SF PRO ROUNDED "HOMEOWNER & INTERIOR DESIGN ENTHUSIAST".

GENERAL

USE SEMANTIC TAILWIND CLASSES ONLY AS LISTED. DO NOT INTRODUCE A DESIGN TOKEN SYSTEM — COLORS ARE INLINE HEX/TAILWIND UTILITIES AS SPECIFIED. MOBILE RESPONSIVE AT BREAKPOINTS SM/MD/LG AS SHOWN. NO BACKEND, NO ROUTER BEYOND THE SINGLE INDEX ROUTE. THE PAGE MUST SCROLL NATURALLY: FULL-BLEED VIDEO HERO, THEN WHITE SECTIONS.

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.