BUILD A SINGLE-PAGE REACT + VITE + TYPESCRIPT + TAILWIND APP (SHADCN-UI BASE) THAT EXACTLY RECREATES THE PAGE DESCRIBED BELOW. USE FRAMER-MOTION AND LUCIDE-REACT. IMPLEMENT EVERYTHING INSIDE SRC/PAGES/INDEX.TSX. DO NOT USE ANY CUSTOM TAILWIND TOKENS FOR COLORS — USE THE INLINE STYLES AND EXACT PIXEL VALUES LISTED.

## GLOBAL SETUP

- SRC/INDEX.CSS SETS HTML, BODY, #ROOT { FONT-FAMILY: "INTER TIGHT", SANS-SERIF; } (KEEP THE DEFAULT SHADCN HSL DESIGN TOKENS OTHERWISE).
- PAGE BACKGROUND: #EEF1F7, MIN-HEIGHT: 100VH, OVERFLOW: HIDDEN, FLEX CENTERED.
- ALL REMOTE ASSETS ARE LOADED FROM THE CONSTANT:

    ```
    const A = "https://qclay.design/lovable/sixsense";
    ```

  - LOCAL ASSETS (IN PUBLIC/TILES/): TILE-EMPTY.SVG, TILE-1.SVG, TILE-2.SVG, TILE-3.SVG, TILE-4.SVG, TILE-5.SVG (ROUNDED BLUE GLASS-TILE SVGS).

## LAYOUT (TOP TO BOTTOM, Z-INDEX ORDER)

### 1. PIXEL-GRID BACKGROUND (TWO  INSTANCES, SIDE="LEFT" AND SIDE="RIGHT")

- CANVAS-BASED GRID: COLS=12, ROWS=16, TILE SIZE 32PX, GAP=1PX.
- TILES: TILE-EMPTY.SVG FOR OFF, ONE OF TILE-1..5.SVG (CHOSEN RANDOMLY PER CELL) FOR ON. SPRITES LOADED ONCE VIA A MODULE-LEVEL PROMISE CACHE AND RASTERIZED AT DEVICEPIXELRATIO (CAPPED AT 2) INTO OFFSCREEN CANVASES.
- POSITIONED POSITION: ABSOLUTE, ANCHORED TO ITS SIDE: 0, TOP: 50%, TRANSFORM: TRANSLATEY(-40%), Z-INDEX: 0, POINTER-EVENTS: NONE.
- RADIAL MASK: RADIAL-GRADIENT(ELLIPSE 80% 80% AT 30% 50%, BLACK 0%, TRANSPARENT 75%) FOR LEFT, AT 70% 50% FOR RIGHT.
- BASE FILL RATIO 0.35 OF CELLS, SHUFFLED FISHER-YATES REVEAL ORDER.
- REVEAL ANIMATION ON MOUNT: PROCESS CEIL(TOTAL/18) TILES PER RAF TICK (~300–400 MS TOTAL) TURNING ON EACH BASE-FILLED CELL.
- AMBIENT FLICKER: EVERY 120–300 MS TOGGLE 3 RANDOM NON-HOVERED CELLS USING BASE FILL RATIO, INDEFINITELY.
- HOVER BLOB (WINDOW-LEVEL POINTER): ORGANIC RADIUS AROUND CURSOR WITH BASE RADIUS 4 CELLS; RADIUS MODULATED BY SIN(ANGLE3 + T0.0011)0.55 + SIN(ANGLE5 - T0.0017 + 1.3)0.30 + SIN(ANGLE2 + T0.0007 + 2.1)0.20, MULTIPLIED BY (0.95 + N0.30). CELLS INSIDE RMAX-0.5 ARE ON; CELLS IN (RMAX-0.5, RMAX+0.4] USE DETERMINISTIC EDGE NOISE (SIN(X12.9898 + Y78.233 + T0.002)+1)0.5 > 0.45. HOVERED CELLS USE HOVER_FILL_RATIO = 0.7. THROTTLE POINTERMOVE WITH RAF; RECONCILE HOVERSET ON EVERY MOVE SO CELLS RELEASE ON LEAVE.
- HOVER FLICKER: EVERY 70–160 MS RE-RANDOMIZE ~18% OF HOVERED CELLS.
- HONOR PREFERS-REDUCED-MOTION: SKIP REVEAL/FLICKER, JUST PAINT FINAL BASE STATE.

### 2. NAVBAR (POSITION: FIXED, TOP:0, FULL WIDTH, Z:50, TRANSPARENT)

- INNER ROW AT MARGIN-TOP: 22PX, MARGIN-LEFT: 22PX, GAP: 6PX, TOTAL WIDTH 86.816PX, HEIGHT 16PX.
- TWO IMAGES SIDE-BY-SIDE, EACH HEIGHT: 16PX, WIDTH AUTO:
  - ${A}/LOGO-ICON.SVG
  - ${A}/LOGO-TEXT.SVG

### 3. LEFT SIDEBAR (POSITION: FIXED, LEFT:16, VERTICALLY CENTERED, Z:10, COLUMN FLEX, GAP:8)

- TWO 40×40 BUTTONS, BOTH WITH BORDER-RADIUS: 12, TRANSITION BACKGROUND 0.2S.
  - TOP (FILLED): BORDER: 1PX SOLID RGBA(34,106,205,0.05), BACKGROUND: RGBA(255,255,255,0.90), BACKDROP-FILTER: BLUR(8PX). HOVER -> RGBA(255,255,255,1). ICON: ${A}/CHAT.SVG, 18×18.
  - BOTTOM (GHOST): NO BORDER, TRANSPARENT. HOVER -> RGBA(255,255,255,0.5). ICON: ${A}/SEARCH.SVG, 18×18.

### 4. MAIN COLUMN (Z:5, CENTERED, PADDING-TOP: 60, MAX-WIDTH: 760)

#### 4A. FOLDER/LIGHTS STACK — WRAPPER POSITION: RELATIVE; WIDTH: 113.67; HEIGHT: 220; OVERFLOW: VISIBLE

RENDER IN THIS EXACT ORDER (LATER = HIGHER VISUAL STACK). ALL POSITION: ABSOLUTE, ALL IMAGES USE ${A}/.... EACH ENTERS WITH FRAMER-MOTION AS LISTED.

| Z | SRC | BOTTOM | LEFT | WIDTH | HEIGHT | ENTER ANIMATION |
|---|---|---|---|---|---|---|
| 1 | BLUE-LIGHT-2.SVG | 50 | 54.6 (TRANSLATEX -50%) | 104 | 170 | OPACITY 0→1, DUR 0.8, DELAY 1.0, EASEOUT |
| 2 | BLUE-LIGHT.SVG | 28 | 54.6 (TRANSLATEX -50%) | 104 | 170 | SAME AS ABOVE |
| 3 | LIGHT-1.SVG | 35 | 57.2 (TRANSLATEX -50%) | 180.5 | 124.5 | OPACITY 0→1, DUR 1.0, DELAY 1.0, EASEOUT |
| 4 | FOLDER-3.SVG | 60 | 23.4 | 69.71 | 45 | OPACITY 0→1, Y 30→0, DUR 0.6, DELAY 0.8, EASE [0.22,1,0.36,1] |
| 5 | SMALL-LIGHT-2.SVG | 55 | 67.6 (TRANSLATEX -50%) | 39 | 17 | OPACITY 0→1, DUR 0.6, DELAY 1.4, EASEOUT |
| 6 | SMALL-LIGHT.SVG | 50 | 44.2 (TRANSLATEX -50%) | 39 | 25 | SAME AS ABOVE |
| 7 | FOLDER-2.SVG | 45 | 18.98 | 79 | 51 | OPACITY 0→1, Y 30→0, DUR 0.6, DELAY 0.6, EASE [0.22,1,0.36,1] |
| 8 | LIGHT-2.SVG | 20 | 57.2 (TRANSLATEX -50%) | 109 | 162.5 | OPACITY 0→1, DUR 1.0, DELAY 1.1, EASEOUT |
| 9 | FOLDER-1.SVG | 30 | 13 | 91 | 58 | OPACITY 0→1, Y 30→0, DUR 0.6, DELAY 0.4, EASE [0.22,1,0.36,1] |
| 10 | FOLDER-0.SVG?V=2 | 0 | 0 | 113.67 | 76.5 | OPACITY 0→1, Y 30→0, DUR 0.6, DELAY 0.0, EASE [0.22,1,0.36,1] |

#### 4B. THREE FLOATING CARDS (IMAGE-1, IMAGE-2, IMAGE-3) — INSIDE THE SAME WRAPPER

FINAL POSITIONS (X IS OFFSET FROM THE FOLDER HORIZONTAL CENTER = 113.67/2, Y IS BOTTOM):
1. IMAGE-1.PNG → W 88.55, H 68.46, X −82, Y 123, ROTATE −16°
2. IMAGE-2.PNG → W 105, H 87, X 68, Y 124, ROTATE 24°
3. IMAGE-3.PNG → W 105, H 96, X −4, Y 148, ROTATE −4°

START STATE (ALL THREE): W/H 20, ROTATE 0, SITTING JUST ABOVE THE FOLDER (X:-5,Y:7, X:35,Y:33, X:-4,Y:27).

ENTRANCE: ANIMATE OPACITY 0→1, WIDTH, HEIGHT, LEFT, BOTTOM TOGETHER WITH DURATION: 1.4, DELAY: 0.6 + I*0.25, EASE: [0.16, 1, 0.3, 1]. TRANSFORM-ORIGIN: 50% 100%. BORDER-RADIUS: 10, BOX-SHADOW: 0 16PX 40PX RGBA(0,0,0,0.18), 0 4PX 10PX RGBA(0,0,0,0.10). IMAGE FILLS WITH OBJECT-FIT: COVER.

IDLE (NO CARD HOVERED): INFINITE Y AND ROTATE KEYFRAME LOOPS PER CARD:
- CARD 0: Y [0,-6,0,4,0], ROT [R, R-2, R, R+2, R], DURATION 6S
- CARD 1: Y [0,5,0,-5,0], ROT [R, R+2, R, R-2, R], DURATION 7S
- CARD 2: Y [0,-4,0,6,0], ROT [R, R-1.5, R, R+1.5, R], DURATION 8S
- ALL REPEAT: INFINITY, EASE: EASEINOUT.

HOVER (PER CARD): HOVERED CARD SCALE: 1.08, Z-INDEX: 20, ALL THREE FREEZE FLOATING (Y:0, ROTATE: FINAL ROTATE). TRANSITION DURATION 0.4, EASE [0.16,1,0.3,1]. CURSOR: POINTER.

#### 4C. HEADING

LET'S FIND THE RIGHT
REFERENCES FOR YOUR WORK
- 

 — INTER TIGHT, 32PX, WEIGHT 400, LINE-HEIGHT 32PX, LETTER-SPACING −0.64PX, COLOR #11315D, WIDTH 385, MARGIN 32PX AUTO 8PX, TEXT-ALIGN CENTER.
- ENTER: OPACITY 0→1, Y 16→0, FILTER BLUR(6PX)→BLUR(0), DUR 0.6, DELAY 0.3, EASEOUT.

#### 4D. SUBTITLE

- 

 TEXT: WHAT TYPE OF REFERENCES ARE YOU LOOKING FOR?
- INTER TIGHT 14, WEIGHT 400, COLOR RGBA(13,27,75,0.50), CENTERED, MARGIN-BOTTOM: 20.
- ENTER: OPACITY 0→1, Y 12→0, DUR 0.6, DELAY 0.45, EASEOUT.

#### 4E. PROMPT INPUT BOX

OUTER WRAPPER:
- WIDTH 702 (MAX 100%), CENTERED, PADDING 4, BORDER-RADIUS 24, BORDER 0.5PX SOLID RGBA(0,0,0,0.05), BACKGROUND RGBA(157,196,250,0.15), BACKDROP-FILTER: BLUR(50PX).
- ENTER: OPACITY 0→1, Y 16→0, FILTER BLUR(4PX)→0, DUR 0.6, DELAY 0.55, EASEOUT.

INNER CARD: WIDTH 100%, HEIGHT 116, WHITE BACKGROUND, BORDER-RADIUS 20, BORDER 1PX SOLID RGBA(34,106,205,0.05), PADDING 14PX 14PX 12PX 16PX, FLEX COLUMN.

TYPEWRITER LINE (): HEIGHT 32, FONT INTER TIGHT 15/22, WEIGHT 400, COLOR #0D1B4B, PADDING-BOTTOM 10. PHRASES (CYCLE INFINITELY):
1. "CREATE A FINANCE DASHBOARD DESIGN"
2. "BRANDING WITH M LETTER"
3. "LIQUID GLASS EFFECT"
4. "LOADER ANIMATION"
5. "SAAS LANDING PAGE"

BEHAVIOR: TYPE ONE CHAR AT 22 + RANDOM*25 MS; ON FULL PHRASE, PAUSE 1400 MS (≈ TWO CARET BLINKS); DELETE ONE CHAR PER 14 MS; ADVANCE TO NEXT PHRASE, LOOP. CARET: 2×18 PX BAR, COLOR #0D1B4B, MARGIN-LEFT: 2, BLINKS VIA @KEYFRAMES PROMPTCARETBLINK { 0%,49%{OPACITY:1} 50%,100%{OPACITY:0} } AT 1S STEPS(1) INFINITE.

BOTTOM TOOLBAR ROW (MARGIN-TOP: 5, SPACE-BETWEEN, ALIGN-ITEMS: CENTER):

LEFT CLUSTER (GAP: 6, TRANSFORM: TRANSLATEY(35%)):
- "TOP EXPERT" PILL — WIDTH 110, HEIGHT 28, BACKGROUND #E8F1FF, BORDER-RADIUS 8, PADDING 0 8. INSIDE: 14×14 ROUNDED-4 SQUARE WITH LINEAR-GRADIENT(166DEG, #A0E4FF 9.8%, #9CA4FB 184.41%) CONTAINING 8×8 ${A}/AI-SELECT.SVG; LABEL "TOP EXPERT" INTER TIGHT 12/16, COLOR #5085CE, CENTERED, NO-WRAP;  FROM LUCIDE.
- 28×28 BUTTON, RADIUS 6, BORDER 1PX SOLID RGBA(0,0,0,0.10), BG RGBA(255,255,255,0.80), ICON ${A}/IMAGE.SVG 14×14.
- 28×28 BUTTON, SAME STYLE, ICON ${A}/CAPA_1.SVG 14×14.
- VERTICAL DIVIDER: 1×18, RGBA(0,0,0,0.12), MARGIN 0 2.
- 28×28 GHOST "+" BUTTON: RADIUS 6, BORDER 1PX SOLID RGBA(0,0,0,0.10), TRANSPARENT BG, GLYPH + 16PX RGBA(0,0,0,0.40).
- "UI DESIGN" TAG PILL: HEIGHT 28, BG RGBA(0,0,0,0.05), RADIUS 6, PADDING 0 8, GAP 4. LABEL INTER TIGHT 12 RGBA(13,27,75,0.65), THEN "×" 12 RGBA(0,0,0,0.35) MARGIN-LEFT 2.

RIGHT SIDE: SENDBUTTON (SEE BELOW).

#### 4F. SENDBUTTON (44×44 WRAPPER)

- MOTION.DIV WRAPPER: 44×44, FLEX CENTERED, CURSOR POINTER, TRANSLATEY: 10% (PERSISTENT VERTICAL OFFSET), ANIMATE={{ SCALE: HOVERED ? 1.05 : 1 }}, TRANSITION 0.2S.
- OUTER HALO: ABSOLUTE INSET 0, RADIUS 15, BACKGROUND: RGBA(151,195,255,0.15), Z 1.
- INNER 36×36 SQUARE (CENTERED): RADIUS 12, BACKGROUND: LINEAR-GRADIENT(180DEG, #70A8F2 0%, #3D82DE 100%), PADDING 8, OVERFLOW HIDDEN, Z 2,
  BOX-SHADOW: INSET 0 1PX 18PX 2PX RGBA(173,208,255,0.20), INSET 0 1PX 4PX 2PX RGBA(222,236,255,0.80), 0 42PX 107PX 0 RGBA(61,130,222,0.34), 0 10PX 10PX 0 RGBA(61,130,222,0.20), 0 3.714PX 4.846PX 0 RGBA(61,130,222,0.15).
- SPINNING BORDER: ABSOLUTE INSET:-1, RADIUS 13, PADDING 1, MASKED TO A 1PX RING USING WEBKITMASK: LINEAR-GRADIENT(#000 0 0) CONTENT-BOX, LINEAR-GRADIENT(#000 0 0); WEBKITMASKCOMPOSITE: XOR (AND MASK / MASKCOMPOSITE: EXCLUDE EQUIVALENTS). BACKGROUND CONIC-GRADIENT(FROM 0DEG, RGBA(255,255,255,0) 0DEG, #FFFFFF 60DEG, #9EC7FF 120DEG, RGBA(255,255,255,0) 200DEG, RGBA(255,255,255,0) 360DEG). INNER 

 HAS ITS TRANSFORM: ROTATE(XDEG) UPDATED EACH RAF. SPEED EASED TOWARD TARGET VIA K = 1 - EXP(-DT/TAU) WITH TAU=250MS WHILE HOVERED (TARGET = 360DEG / 1500MS) AND TAU=700MS WHILE NOT HOVERED (TARGET=0). LOOP STOPS WHEN SPEED < 0.0005.
- STATIC FALLBACK BORDER: ABSOLUTE INSET 0, RADIUS 12, 1PX SOLID #9EC7FF, Z 4.
- DOTS OVERLAY: ABSOLUTE INSET 0, Z 2, IMAGE ${A}/DOTS.SVG FILLING 100%/100% WITH OBJECT-FIT: COVER, OPACITY: 0.7.
- HOVER BLINK/SHINE SWEEP: ONLY RENDER WHEN AN ARROWTOGGLE COUNTER > 0 (INCREMENTED ON EACH HOVERSTART). USES KEY={BLINK-${ARROWTOGGLE}} SO IT RE-MOUNTS EVERY HOVER. MOTION.DIV ABSOLUTE INSET 0, Z 4, POINTER-EVENTS: NONE, MIXBLENDMODE: SCREEN, BACKGROUND LINEAR-GRADIENT(110DEG, TRANSPARENT 30%, RGBA(255,255,255,0.55) 50%, TRANSPARENT 70%), INITIAL={{X:'-120%'}}, ANIMATE={{X:'120%'}}, TRANSITION: { DURATION: 0.7, EASE: [0.4,0,0.2,1] }. PLAYS EXACTLY ONCE PER HOVER, NEVER REVERSES.
- ARROW SWAP: 16×16 RELATIVE BOX, OVERFLOW HIDDEN, Z 5. TWO MOTION.IMG OF ${A}/ARROW-UP.SVG, BOTH 16×16 ABSOLUTE INSET 0:
  - OUTGOING: KEY={OUT-${ARROWTOGGLE}}, INITIAL {Y:0, OPACITY:1}, ANIMATE {Y:-16, OPACITY:0}, TRANSITION { DURATION: 0.32, EASE: [0.65,0,0.35,1] }.
  - INCOMING: KEY={IN-${ARROWTOGGLE}}, INITIAL {Y:16, OPACITY:0}, ANIMATE {Y:0, OPACITY:1}, SAME TRANSITION. THE NEW ARROW REMAINS IN PLACE AFTER HOVER-OUT.

### 5. FOOTER (POSITION: FIXED, BOTTOM 20, FULL WIDTH, Z 5, CENTERED)

- INTER TIGHT 13, WEIGHT 400, COLOR RGBA(13,27,75,0.45).
- TEXT: BY SENDING A MESSAGE TO CHATBOT, YOU AGREE TO OUR TERMS AND HAVE READ OUR PRIVACY POLICY.
- "TERMS" AND "PRIVACY POLICY." ARE , COLOR RGBA(13,27,75,0.65), UNDERLINE, TEXT-UNDERLINE-OFFSET: 2, CURSOR POINTER.

## ASSET LIST (ALL FROM ${A} UNLESS NOTED)

REMOTE (HTTPS://QCLAY.DESIGN/LOVABLE/SIXSENSE/...):
LOGO-ICON.SVG, LOGO-TEXT.SVG, CHAT.SVG, SEARCH.SVG, FOLDER-0.SVG (USE ?V=2), FOLDER-1.SVG, FOLDER-2.SVG, FOLDER-3.SVG, BLUE-LIGHT.SVG, BLUE-LIGHT-2.SVG, LIGHT-1.SVG, LIGHT-2.SVG, SMALL-LIGHT.SVG, SMALL-LIGHT-2.SVG, IMAGE-1.PNG, IMAGE-2.PNG, IMAGE-3.PNG, AI-SELECT.SVG, IMAGE.SVG, CAPA_1.SVG, DOTS.SVG, ARROW-UP.SVG.

LOCAL (PUBLIC/TILES/): TILE-EMPTY.SVG, TILE-1.SVG … TILE-5.SVG.

## DEPENDENCIES

FRAMER-MOTION, LUCIDE-REACT, REACT, REACT-DOM, REACT-ROUTER-DOM, TAILWINDCSS, VITE, PLUS THE STANDARD SHADCN-UI BOILERPLATE. ONLY SRC/PAGES/INDEX.TSX AND SRC/INDEX.CSS NEED PAGE-SPECIFIC CODE; THE REST IS THE DEFAULT VITE + SHADCN TEMPLATE.