MotionSites · 3D and motion hero

Build a full-viewport cinematic hero section for a travel brand called "Wanderful" using React + TypeScript + Vite + Tailwind CSS. Use GSAP for animation and `lucide-react` for icons. **Fonts (load via Google Fonts in `src/index.css`):** ```css @import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Barlow:wght@300;400;500;600&family=Inter:wght@300;400;500;600;700&display=swap'); ``` Also load a custom display font: ```css @font-face { font-family: 'Dirtyline'; src: url('https://fonts.cdnfonts.com/s/15011/Dirtyline36DaysofType.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; } ``` Body font: `Barlow`. Hero headings: `Inter`. Body background: `#000`. **Video background (fixed, full screen, z-0):** - Use this exact CloudFront URL as the `<video>` src: `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf…

Build a full-screen hero section landing page for "Aurai" - an always-on AI wellness companion. The page is a single viewport-height section with a looping background video and overlaid content. ## Video Background - Full-screen `<video>` element with `autoPlay`, `loop`, `muted`, `playsInline` attributes - Video URL: `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260618_174853_aac61aa2-0f3f-4cf1-bc78-7f657dd11164.mp4` - Video covers entire viewport with `object-cover` - Focal point positioning: - Mobile (default): `object-position: 80% center` - Tablet (md breakpoint): `object-position: right center` - Desktop (lg breakpoint): `object-position: center center` ## Fonts - **Askan Light** loaded from: `https://db.onlinewebfonts.com/c/304a6edcec9f8858eeaafc2ac18243f4?family=Askan+Light` - used for the brand name and heading - **Inter** (weights 300, 400, 500, 60…

Build a React + TypeScript + Tailwind CSS single-page hero section using Vite. The entire page lives in `src/App.tsx`. No extra libraries beyond `react`, `react-dom`, `lucide-react`, and Tailwind. **Background:** - A fullscreen autoplaying, muted, looping, `playsInline` background `<video>` element absolutely positioned `inset-0 w-full h-full object-cover`. - Video URL (exact): `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260508_215831_c6a8989c-d716-4d8d-8745-e972a2eec711.mp4` - Root wrapper: `relative min-h-screen overflow-hidden bg-[#f0f0ee]`. - Foreground content wrapper: `relative z-10 flex flex-col min-h-screen`. **Logo (inline SVG component):** - `width="18" height="18"`, `viewBox="0 0 256 256"`, `fill="none"`. - Single path with `fill="rgb(84, 84, 84)"` and `d="M 160 88 L 194 34 L 216 0 L 256 0 L 256 40 L 221.5 93.5 L 200 128 L 256 128 L 256 256 L 9…

**Build a fullscreen hero section in a Vite + React + TypeScript + Tailwind CSS project. Use `gsap` and `lucide-react`. No other UI libraries.** ### Fonts (in `src/index.css`) Import at the top of index.css BEFORE ` @tailwind ` directives: ```css @import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Barlow:wght@300;400;500;600&display=swap'); @font -face { font-family: 'Dirtyline'; src: url('https://fonts.cdnfonts.com/s/15011/Dirtyline36DaysofType.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; } ``` Body font: `'Barlow', sans-serif`, background `#000`. ### Tailwind config (`tailwind.config.js`) ```js theme: { extend: { fontFamily: { heading: ['Instrument Serif', 'serif'], body: ['Barlow', 'sans-serif'], dirtyline: ['Dirtyline', 'sans-serif'], }, borderRadius: { DEFAULT: '9999px' }, }, }, ``` ### CSS (append to `src/in…

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", …

Create a single-page React + Vite landing page for "Marketeam" -- a marketing talent platform. Use Inter (400, 500, 600, 700) and Urbanist (600, 700) from Google Fonts. The page is a full-viewport hero with a header, left content area, right animated circles visualization, and a bottom logo ticker strip. --- ### Background Full-page background image covering the entire viewport: ``` https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260624_111401_56af5012-2263-45d3-849a-8688084d7c2a.png&w=1280&q=85 ``` Applied as `background: url(...) center center / cover no-repeat` on the root `.app` container. --- ### Header - Flexbox row, `justify-content: space-between`, padding `24px 64px`, max-width `1920px`, centered. - **Left side**: Logo image + nav links - Logo: `<img>` with height 32px from: `https://polo-pe…

Build a **single-page React + TypeScript (Vite)** landing hero for a product called **"Xero"** that recreates the following section exactly. Use the **Inter** Google Font (weights 300, 400, 500, 600, 700, 800). Do not use Tailwind utility classes for the hero — write plain CSS in a global stylesheet. No purple/indigo branding outside the specified pink-magenta gradient arc. ## Layout & Structure Render three top-level blocks centered on a black page (`#0a0a0f`), each constrained to `max-width: 1600px`, in this vertical order: 1. **`<nav>`** — sticky-style top bar (not actually sticky, just at top) 2. **`<section class="hero-card">`** — the rounded dark hero card with the animated icon pipeline 3. **`<div class="brands">`** — a row of 5 monochrome brand logos The body uses `display: flex; flex-direction: column; align-items: center; padding: 14px;` and `font-family: 'Inter', sans-serif;`…

Build a React landing page exactly as specified below. Use React 19, Tailwind CSS v4, and motion/react for animations. 1. Fonts & Global CSS Setup: In index.html, import these Google Fonts: Instrument Serif (weights 400, italic 400) Inter (weights 100 to 900) In src/index.css, import this custom font for the Nokia text: @import url('https://db.onlinewebfonts.com/c/440b53b1a1c65037f944ff19259d8014?family=Nokia+Cellphone+FC+Small'); Configure the Tailwind theme variables in index.css: --font-instrument: "Instrument Serif", serif; --font-serif: "Instrument Serif", serif; --font-sans: "Inter", sans-serif; --font-nokia: "Nokia Cellphone FC Small", monospace; Create a @utility font-instrument { font-family: "Instrument Serif", serif; } Set the root font-family to var(--font-sans) and apply anti-aliasing. 2. Component Structure: Create one main App.tsx file containing 4 components: TypingMessa…

### Stack - **Vite** + **React 18** + **TypeScript** - **Tailwind CSS 3.4** - **lucide-react** for icons (`LogIn`, `UserPlus`, `Play`, `Sparkles`, `Menu`, `X`) - No Framer Motion -- all animations are CSS `transition-*` classes --- ### Fonts (loaded in `index.html`) ```html <link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet" /> <link href="https://db.onlinewebfonts.com/c/6e47ef470dd19698c911332a9b4d1cf4?family=Neue+Haas+Grotesk+Text+Pro" rel="stylesheet" /> <link href="https://db.onlinewebfonts.com/c/dec0d9b4e22ca588dc20e1e2e09a59b5?family=Neue+Haas+Grotesk+Display+Pro+55+Roman" rel="stylesheet" /> ``` Body/root font stack (in `index.css`): ```css html, body, #root { height: 100%; margin: 0; fo…

Build a single full-viewport hero section in React + TypeScript + Vite + Tailwind CSS, using `lucide-react` for icons. The component is a character-figurine carousel called "TOONHUB". **Fonts (load in `index.html` head):** ```html <link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link href="https://fonts.googleapis.com/css2?family=Anton&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" /> ``` Body font: `'Inter', sans-serif`. Display font (huge ghost text + bottom-right link): `'Anton', sans-serif`. **Image data (4 items, exact URLs and colors):** ```ts const IMAGES = [ { src: 'https://fifth-gentle-45902158.figma.site/_components/v2/4de492f6d9cf8244ad5293233e5c6f52407d42fc/1.02464a56.png', bg: '#F4845F', panel: '#F79B7F' }, { src: 'https://fifth-gentle-45902158.figma.site/_components/v2/4d…