MotionSites · Portfolio story architecture

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** -…

626f6c742d63632d6167656e74Let me read all the relevant files to compile the full recreation prompt. Here's the full recreation prompt: --- ## Prompt to Recreate This Hero Section Build a full-screen hero section for a creative portfolio using React, Vite, Tailwind CSS, and the Figtree Google Font. The page has two components: a **Navbar** and a **Hero**. No additional packages beyond `lucide-react` (though it's not used here). The entire page is black background with white text. --- ### Setup - **Font:** Figtree (400, 500, 600) from Google Fonts, loaded in `index.html` - **Tailwind custom breakpoints (max-width based):** - `mobile`: max 809.98px - `md-tablet`: min 810px, max 1199.98px - **CSS variable:** `--ease-spring: cubic-bezier(0.16, 1, 0.3, 1)` --- ### Video Background Three full-screen looping videos (muted, autoPlay, playsInline, loop) stacked absolutely with crossfade switching…

**Create a single-page landing hero section for a creative agency called "Alwayzz" with a React + Vite + Tailwind CSS setup. Use custom CSS (not Tailwind utilities) for all styling. The design should be minimal, clean, black-and-white, with tight negative letter-spacing throughout.** --- ### Fonts (loaded via Google Fonts in index.html) ``` Inter: weights 400, 500, 600, 700 Source Serif 4: weights 400, 600 (both normal and italic) ``` Preconnect to `fonts.googleapis.com` and `fonts.gstatic.com`. --- ### CSS Variables ```css --bg: #ffffff; --text: #0a0a0a; --muted: #6b6b6b; --button-bg: #0a0a0a; --button-text: #ffffff; --border-soft: rgba(0, 0, 0, 0.08); --green: #17c964; ``` --- ### Components **1. Navbar (fixed top, z-index 100)** - Padding: `19px 36px`, max-width `1200px` centered. - Left: Logo text "Alwayzz" in `Source Serif 4`, 30px, weight 600, **italic**, letter-spacing `-0.08em`,…

Build a 3D Creator portfolio landing page for "Jack" using React, TypeScript, Tailwind CSS, Framer Motion, and Lucide React. The page has a dark theme (#0C0C0C background) with the font Kanit (Google Fonts, weights 300-900). The page title is "Jack -- 3D Creator". GLOBAL STYLES Background: #0C0C0C on html, body, #root, and the main wrapper Font family: 'Kanit', sans-serif Global reset: box-sizing border-box, margin 0, padding 0 CSS class .hero-heading: gradient text using background: linear-gradient(180deg, #646973 0%, #BBCCD7 100%) with -webkit-background-clip: text and -webkit-text-fill-color: transparent Main wrapper has overflowX: 'clip' SECTION ORDER HeroSection MarqueeSection AboutSection ServicesSection ProjectsSection 1. HERO SECTION Full viewport height (h-screen), flex column layout with overflowX: clip. Navbar: Horizontal nav bar with 4 links -- "About", "Price", "Projects", …

Build a full-viewport dark personal portfolio Features section using React + TypeScript + Tailwind CSS + lucide-react. **Layout & Structure:** - Full screen dark background `#0a0a0a`, white text, Inter font with antialiased smoothing - Top header row: left side has a heading "Hi, I'm Max Reed!" (size `text-[28px] sm:text-3xl md:text-4xl lg:text-[44px]`, leading `1.15`, font-normal, tracking-tight) followed by a paragraph "A London-based independent creator shaping sharp visual systems, web-ready products, and story-first campaigns. With a decade of craft behind me, I help ideas move with focus and intention." (text-sm md:text-[15px], leading-[1.6], text-white/60, max-w-3xl). Header container has `max-w-3xl`. - Right side of header: a liquid-glass rounded-full button "Let's Team Up Today" (px-5 sm:px-6, py-2.5 sm:py-3) - Overall section padding: `px-4 sm:px-6 md:px-10 lg:px-14 py-6 sm:py…

Build a full-screen hero section using React, Tailwind CSS, Framer Motion, and Lucide React icons. Use the Inter font. The page is fully mobile-responsive. Here are the exact specifications: --- **BACKGROUND:** - A full-screen autoplaying, looping, muted video covering the entire viewport as a background. - Video URL: `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260517_222138_3e3205be-3364-417b-a64a-bfe087acbec4.mp4` - The video is positioned absolute, inset-0, with `object-cover` to fill the viewport. --- **COLOR:** - Accent color: `#5E0ED7` (deep purple). Used for the logo dot, the "+" symbols in stats, and the CTA link text. - All body text is black (#000). --- **FONT:** - Font family: `'Inter', sans-serif` applied to the root container. - All text is uppercase with wide letter-spacing (`tracking-widest` or `tracking-wide`). - Font weights: 600 (semibol…

Create a React + Vite + TypeScript + Tailwind CSS landing page for a creative studio called "Prisma". The page has 3 sections: Hero, About, and Features. Use framer-motion for animations and lucide-react for icons. The design is dark, moody, and cinematic with a warm cream color palette. FONTS Load two Google Fonts in index.html: Almarai (weights: 300, 400, 700, 800) -- used as the global default font Instrument Serif (italic only) -- used for italic accent text in the About section In index.css, set the global font family: * { font-family: 'Almarai', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif; } In tailwind.config.js, extend: colors.primary: #DEDBC8 (warm cream, used for all primary text and accents) fontFamily.serif: ['"Instrument Serif"', 'serif'] COLOR SYSTEM Background: black (#000000) globally, #101010 for the About card, #…

Build a fullscreen hero landing page for a creative agency called "VANGUARD" using React, Tailwind CSS, and Vite. The page should be a single viewport-height section with a looping background video and all content overlaid on top. **Background video:** Use this exact CloudFront URL as a fullscreen `<video>` element with `autoPlay`, `muted`, `loop`, and `playsInline` attributes, set to `object-cover` to fill the entire viewport: ``` https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260606_154941_df1a96e1-a06f-450c-bd02-d863414cc1a0.mp4 ``` **Fonts (loaded in index.html):** 1. "FSP DEMO - PODIUM Sharp 4.11" from `https://db.onlinewebfonts.com/c/8b75d9dcff6a48c35a46656192adf019?family=FSP+DEMO+-+PODIUM+Sharp+4.11` -- used for the brand name and main heading. Create a `.font-podium` utility class for it and register it in tailwind.config.js as `fontFamily.podium`. 2…