MotionSites

Build a React + Vite + Tailwind CSS landing page for "Axion Studio" - a design agency site. Use the `shaders` package (npm: `shaders`) for the hero background, `lucide-react` for icons. The page has 3 sections. Match every detail exactly: --- ## SECTION 1: HERO (Full viewport height) **Background:** Light gray `#EFEFEF` with a full-screen animated shader overlay (positioned absolute, inset-0, z-10, pointer-events-none). The shader stack uses components from `shaders/react`: - `Swirl` - colorA: `#ffffff`, colorB: `#f0f0f0`, detail: 1.7 - `ChromaFlow` - baseColor: `#ffffff`, downColor/leftColor/rightColor/upColor: `#ff5f03`, momentum: 13, radius: 3.5 - `FlutedGlass` - aberration: 0.61, angle: 31, frequency: 8, highlight: 0.12, highlightSoftness: 0, lightAngle: -90, refraction: 4, shape: "rounded", softness: 1, speed: 0.15 - `FilmGrain` - strength: 0.05 **Navigation (z-20, relative):** A p…

**Prompt:** Create an "About Me" section using React, Tailwind CSS, and **framer-motion**. The site uses **Google Font "Kanit"** (weights 300-900) and a dark background `#0C0C0C`. **Section layout:** - Full-width section, `min-h-screen`, flexbox column, centered both axes - Padding: `px-5 sm:px-8 md:px-10 py-20` - Background: `#0C0C0C` (inherited from page) - `position: relative` -- the section has 4 decorative floating images placed absolutely in the corners **4 decorative corner images (absolute positioned, z-0):** 1. **Top-left** -- Moon icon - URL: `https://shrug-person-78902957.figma.site/_components/v2/ebb2b8f25d8e24d5f0a5ca8af4c950de81aa2fd7/moon_icon.11395d36.png` - Position: `top-[4%] left-[1%] sm:left-[2%] md:left-[4%]` - Size: `w-[120px] sm:w-[160px] md:w-[210px] h-auto` - Fade-in animation: `delay: 0.1`, slides from left (`x: -80, y: 0`), `duration: 0.9` 2. **Bottom-left** -…

## Prompt Build a single-page React + Vite + TypeScript + Tailwind CSS site with exactly two full-screen sections (Hero and Capabilities). The page is a dark, cinematic web design agency landing page with "liquid glass" morphism UI elements and smooth blur/fade animations using Framer Motion. --- ### Fonts (Google Fonts) Load via `<link>` in `index.html`: - **Instrument Serif** (italic) -- used for all headings (`font-heading`) - **Barlow** (weights 300, 400, 500, 600) -- used for body text (`font-body`) Tailwind config extends `fontFamily`: ```js heading: ["'Instrument Serif'", 'serif'], body: ["'Barlow'", 'sans-serif'], ``` Base CSS: `html, body { background: #000; color: #fff; font-family: 'Barlow', sans-serif; }` --- ### Liquid Glass CSS (in index.css) Two variants defined as plain CSS classes: **`.liquid-glass`** (subtle): - `background: rgba(255, 255, 255, 0.01)` with `background-…