AI Sites

Design a futuristic SaaS landing page with a dark cosmic gradient background, glassmorphic hero card, animated aurora blobs, floating 3D product mockup, sticky glass navigation, feature grid with iridescent icons, pricing tiers with a highlighted 'Popular' plan, testimonial marquee, and a bold CTA footer. Use a violet-to-cyan palette, Inter for body and Space Grotesk for headings, generous whitespace, and subtle Framer Motion micro-interactions.

Create a minimal editorial portfolio for a designer. Full-bleed hero with oversized serif type (Fraunces), horizontal scrolling case-study strip, hover-reveal project thumbnails, silky page transitions, a color palette of ivory, ink, and one accent (burnt orange). Include an About section with a portrait mask, capabilities list, and a contact block with a large mailto CTA.

Build a bold AI agency website with an animated neural-network hero canvas, glowing gradient CTAs, a services grid (LLM apps, RAG, agents, automations) with hover tilt, case-study carousel, a live 'what we do' typewriter effect, and a team section with animated avatars. Use deep navy backgrounds with iridescent violet accents and Satoshi typography.

Design a luxury e-commerce product page with a cinematic hero video loop, split-screen product story, sticky add-to-cart with variant swatches, ingredient / material breakdown with hover tooltips, editorial lookbook grid, and a reviews section with star distribution. Cream background, brass accents, Playfair Display headings.

Ship a one-page MVP landing with a punchy headline, sub-headline, animated waitlist form (email + success confetti), problem/solution split, 3-step 'how it works', founder note with photo, and a FAQ accordion. Fresh mint palette, rounded-3xl surfaces, Geist Sans.

Create a developer documentation site with a left sidebar TOC, algolia-style command palette (⌘K), syntax-highlighted code blocks with copy button, live API playground, version switcher, and dark/light theme toggle. Monospace headings (JetBrains Mono), quiet neutral palette, tight vertical rhythm.

Design a neo-brutalist creative studio site with thick black borders, hard drop shadows, saturated primary blocks, oversized Space Grotesk display type, sticker-style badges, and playful cursor interactions. Include a manifesto, work grid, and a rotating 'now booking' marquee.

Build a Web3 DEX interface with a glassy swap card (token in/out, slippage, gas), live price chart with candlesticks, wallet connect button, network switcher, portfolio drawer, and a transaction history panel. Deep navy background, neon mint accents, monospace numeric readouts.

Design a fine-dining restaurant site with a cinematic hero video of plating, chef's story section with vertical serif type, seasonal menu with animated dish reveals, reservation widget, gallery with a masonry lightbox, and a footer with map & press quotes. Cream + charcoal + terracotta palette.

Build a full-screen, dark-themed hero section for a geology brand called Lithos using React 18 + TypeScript + Vite + Tailwind CSS and lucide-react. The signature feature is a cursor-following spotlight that reveals a second image through a soft circular mask on top of a base image. Use Inter for UI and Playfair Display italic for the wordmark accent. Heading has two lines: 'Layers hold' (Playfair italic, -0.05em tracking) and 'tales of time' (-0.08em tracking), text-5xl→md:text-8xl. Bottom-left paragraph about sediment layers and bottom-right block with a Start Digging button (bg-[#e8702a], rounded-full, hover:scale-1.03). Cursor spotlight uses SPOTLIGHT_R=260, requestAnimationFrame lerp smoothing (factor 0.1), a hidden canvas that draws a radial gradient (stops 0→1→0.75→0.4→0.12→0) and applies it as maskImage on the reveal layer. Fixed nav with SVG logo, center glass pill (Course active, Field Guides, Geology, Plans, Live Tour), and white Sign Up button. Add hero animations: Ken Burns zoom on base image, blur-rise on headings (staggered 0.25s/0.42s), fade-up on bottom text (0.7s/0.85s). Use 100dvh for mobile chrome.

Build a 3D Creator portfolio landing page for 'Jack' using React, TypeScript, Tailwind CSS, Framer Motion, and Lucide React. Dark theme (#0C0C0C) with Kanit font (300-900). Hero: full viewport, uppercase nav (About, Price, Projects, Contact), massive gradient heading 'Hi, i'm jack' (17.5vw) with linear-gradient(180deg,#646973→#BBCCD7) as text fill, centered 3D portrait with a Magnet mouse-follow component (padding 150, strength 3), and a gradient ContactButton (linear-gradient 123deg #18011F→#B600A8→#7621B0→#BE4C00). Marquee section: two rows of 420x270 GIF tiles that scroll horizontally based on window.scrollY (row 1 right, row 2 left, factor 0.3). About section: min-h-screen with 4 decorative 3D icons in corners (moon, lego, group) with FadeIn x/y offsets, huge 'About me' gradient heading, and a character-by-character AnimatedText using useScroll (offset ['start 0.8','end 0.2']). Services section: white rounded-t-[60px], 5 items (3D Modeling, Rendering, Motion Design, Branding, Web Design) with huge number + name + description separated by borders. Projects section: dark, 3 sticky-stacking cards with useTransform scale (targetScale = 1 - (total-1-i)*0.03), each with a 2-column image grid and a ghost Live Project button.

Build a single-page hero with a full-screen looping background video, liquid glass UI, and a dark cinematic aesthetic using React + TypeScript + Tailwind + lucide-react. Video is object-cover, translate-y-[17%], with a custom requestAnimationFrame fade system: 500ms fade-in on load/loop, 500ms fade-out when 0.55s remain, using a fadingOutRef to prevent re-trigger. Font: Instrument Serif (regular + italic) via Google Fonts. Create a .liquid-glass class with background rgba(255,255,255,0.01), background-blend-mode luminosity, backdrop-filter blur(4px), inset shadow, and a ::before pseudo-element that paints a gradient border (0.45→0.15→0→0.15→0.45) using -webkit-mask-composite: xor. Nav: rounded-full glass pill with Globe + 'Asme' logo, Features/Pricing/About links, plain Sign Up + glass Login button. Center hero: Instrument Serif heading 'Built for the curious' (text-7xl), glass email input pill with white circular ArrowRight submit, subtitle paragraph, and a centered glass Manifesto button. Footer: three glass circular social buttons (Instagram, Twitter, Globe). Wrap in min-h-screen bg-black overflow-hidden.

Build a React + Vite + Tailwind + TypeScript landing page with two full-screen sections for luxury beauty brand 'Serene'. Fonts: Dancing Script (logo), Instrument Serif (headings + quote), Inter (body). Body bg #0a0a0c. Add .liquid-glass, .text-glow (0/40/80/120px white shadows), and .button-glow utilities. Section 1 Hero: h-screen with autoplay muted looping video (object-cover), dark overlay bg-black/20, fixed navbar (Dancing Script 'Serene' logo, About/Services/Journal/Contact links, white 'Book a consultation' pill, mobile hamburger that animates to X with cubic-bezier(0.22,1,0.36,1), slide-in mobile menu w-[85%] with staggered link entrance 75ms). Center content -mt-[120px]: Instrument Serif heading 'Gentle touch. Radiant presence.' (text-[110px] with text-glow), subtext, and white 'Begin your renewal' pill. Section 2 Quote: h-screen with linear-gradient(#010A17→#0A4267→#20658E→#6BADC4). Parallax layers driven by requestAnimationFrame + lerp: rainbow image at top (translate +120→-160px, lerp 0.06), left cloud (slides in from -200px X, lerp 0.04, marginLeft:-50%), right cloud (scale-x[-1], slides from +200px, marginRight:-75%). All transforms use translate3d + will-change-transform. Center Instrument Serif quote in curly quotes with attribution 'Dr. Mia Callahan — Founder'.

Build a fullscreen hero landing page for creative agency 'VANGUARD' using React + Tailwind + Vite. Single viewport section with a looping muted autoplay video (object-cover) filling the entire viewport. Fonts: FSP DEMO — PODIUM Sharp 4.11 (from onlinewebfonts.com) as .font-podium (brand + main heading), Inter for body/nav/stats/CTAs. Icons via lucide-react: ArrowUpRight, Award, Crown, X. Navbar: 'VANGUARD' podium wordmark, center nav (Projects/Studio/Offerings/Inquire), right bordered 'GET IN TOUCH' with ArrowUpRight, mobile hamburger (three white bars w-6/w-6/w-4). Mobile menu: fixed inset-0 z-50 bg-black/95 backdrop-blur-sm, staggered link entrance (transitionDelay i*80+100ms). Hero content (left-aligned, vertically centered): Crown icon + 'World-Class Digital Collective' tagline, three-line PODIUM heading 'Design.' 'Disrupt.' 'Conquer.' at text-[clamp(2.8rem,8vw,7rem)] leading-[0.92], subtext with bold 'they lead.', black 'SEE OUR WORK' CTA + Award badge, stats row (250+ Brands Transformed, 95% Client Retention, 10+ Years). All elements use staggered @keyframes fade-up (translateY 30→0, 0.8s ease-out) with 0.2s incremental delays.