Landing Pages
airbnb
travel
Airbnb 3D Landing Page
Create an Airbnb-inspired landing page featuring an isometric 3D villa, fluid animations, cursor-driven parallax, an accommodation search bar, a stay carousel, and a responsive layout.
243 resources
Landing Page Templates
Discover landing page prompts and live HTML templates for SaaS, portfolios, products, events, marketplaces, and 3D web experiences.
Popular tags
Landing Pages
concert
tickets
AmpLive — 3D Concert Tickets
Create an immersive landing page for discovering concerts and buying tickets, featuring a dark neon aesthetic, 3D elements, fluid animations, genre filters, and an interactive ticket-selection flow.
Landing Pages
anime
streaming
KATANA — 3D Anime Streaming
Create a premium anime streaming platform named KATANA with a cinematic visual direction inspired by contemporary Japanese posters. Use an ink-black, coral-red, and ivory palette; an interactive 3D hero that reacts to the cursor; high-contrast editorial typography; fluid animations; a dynamic catalog with genre filters; search; favorites; a playback modal; and responsive desktop and mobile layouts.
Landing Pages
sports events
3D landing page
ArenaLive — 3D Sports Events
A premium landing page for discovering and promoting live sports events. It features a 3D stadium and ball, immersive animations, sport filters, interactive tilt cards, animated statistics, and ticket calls to action in a dark neon-green visual style.
Landing Pages
esports
gaming platform
ArenaPulse — Competitive Esports Platform
A premium landing page for an esports platform where players and organizers can discover tournaments, compete in skill-based rankings, and follow live matches. It features a high-impact hero with a leaderboard, categories for FPS, MOBA, fighting, and sports games, broadcasting with OBS overlays and VOD, ELO-based leagues with seasons and prizes, a tournament builder supporting Swiss and double-elimination formats, community statistics, and strong calls to action to join a competition.
Landing Pages
gaming marketplace
digital collectibles
LootVault — Secure Game Marketplace
A premium landing page for a digital gaming marketplace where users can buy, sell, and trade skins, keys, cards, battle passes, and rare collectibles. It features a hero with highlighted items, category navigation, product cards with pricing and value history, instant escrow, verified sellers, drop alerts, wishlists, two-factor authentication, anti-fraud protection, dispute resolution, marketplace statistics, and strong calls to action to browse or list an item.
Landing Pages
UX portfolio
case studies
CaseLab — UX Design Portfolio
A premium UX design portfolio landing page focused on communicating process, decisions, and measurable outcomes. It features an editorial hero with selected work, case studies across fintech, healthcare, SaaS, and mobile products, discovery sprints with interviews and journey maps, design systems with tokens and reusable components, usability testing with prototypes and metrics, impact statistics, a clear working process, résumé access, and strong calls to action to read the case studies or start a collaboration.
Landing Pages
landing page
light mode
Light Mode
Same landing page as "Job" but in a clear, elegant Stripe/Notion style. Pure HTML + CSS, Inter font. **Light palette:** - Background: `#fafafa` (off-white) - Secondary background: `#ffffff` - Cards: `#ffffff` with border `#e5e7eb` and soft shadow `0 1px 3px rgba(0,0,0,0.05)` - Text: `#0f172a` / muted `#64748b` - Primary: gradient `#6366f1` → `#8b5cf6` - Accent: `#10b981` **Specific settings:** - Navbar with background `rgba(255,255,255,0.8)` + `backdrop-filter: blur(12px)`, bottom border `#e5e7eb`. - Hero with softer gradient blobs (opacity 0.15). - Dashboard mockup: white background, light gray border, bars with indigo→emerald gradient. - Primary button with shadow `0 10px 25px -10px rgba(99,102,241,0.5)`. - Cards with hover: border becomes `#6366f1` and `translateY(-4px)` + shadow deeper. - Trust logos in gray `#94a3b8`. - Same sections and content as the dark version. Returns `index.html` + `styles.css`.
Landing Pages
art festival
culture events
ArtWalk — Art & Culture Festival
A premium landing page for an urban festival that transforms the downtown arts district into an open-air gallery. It features an editorial hero with the date, location, and ticket call to action, an interactive route map, artist profiles, categories for street art, sculpture, photography, and family activities, a schedule of gallery crawls, live mural sessions, and nighttime installations, event cards with venue, time, and price, attendance statistics, festival passes, newsletter signup, and social links.
Landing Pages
creative studio
portfolio
Atelier Creative Studio Portfolio
Create an immersive portfolio for an independent creative studio, featuring contemporary editorial art direction, interactive 3D objects, fluid motion, selected projects and conversion-focused calls to action.
Landing Pages
brand strategy
freelance portfolio
BrandMint — Freelance Brand Strategist
A premium personal-service landing page for a freelance brand strategist helping startups, DTC companies, and B2B businesses build clear and memorable brands. It features a value-driven hero with availability, services for positioning, naming, brand voice, and workshops, tiered Discovery, Identity Kit, and Launch packages, a transparent working process, deliverables, selected projects, testimonials, experience metrics, indicative pricing, and strong calls to action to book a session or request a proposal.
Landing Pages
affiliate
commission
Buffer Events 3D
Create a landing page designed to convert affiliates, using vibrant colors, 3D elements, and interactive animations.
Landing Pages
design platform
3D landing page
Luma 3D Creative Design Platform
Create a Canva-inspired landing page for a creative design platform featuring a floating 3D editor, interactive animations, filterable templates, AI-powered tools, team collaboration, and a vibrant violet, lime, pink, and turquoise color palette.
Landing Pages
music lessons
interactive 3D
Chorus — Interactive 3D Music Lessons
An immersive landing page for an online music lesson platform, featuring an interactive 3D piano with playable keys, scroll animations, an instrument catalog, and conversion-focused calls to action for booking a free trial lesson.
Landing Pages
affiliate
commission
CodeCraft Developer Portfolio
Create a conversion-focused developer portfolio with a dark aesthetic, neon green accents, interactive 3D elements, and fluid animations.
Landing Pages
freelance agency
creative collective
3D Freelance Collective Agency
An editorial landing page for a freelance collective specializing in strategy, design, creative development, motion, and 3D. It features an interactive three-dimensional sculpture, scroll reveals, a moving marquee, selected projects, and conversion-focused calls to action.
Landing Pages
affiliate
commission
CozyLoft Home Decor
Create to convert affiliates.
Landing Pages
education
language learning
Duolingo 3D Animated Landing Page
Create a Duolingo-inspired language learning landing page featuring a three-dimensional mascot, vibrant green colors, depth-enhanced buttons, interactive cards, a language selector, fluid animations, and a responsive layout.
Landing Pages
steakhouse
restaurant
EmberTable Steakhouse — Immersive 3D Landing Page
Create a premium steakhouse landing page with a dark fire-inspired aesthetic, a 3D presentation of the signature dish, ember and smoke animations, parallax interaction, a featured menu, and a functional reservation form.
Landing Pages
architecture portfolio
3D
Forma — 3D Architecture Portfolio
Create an editorial portfolio for an architecture studio featuring an interactive 3D model, selected projects, scroll-triggered animations, smooth transitions, a contrast mode, and responsive design.
Landing Pages
art director portfolio
3D
Framehaus — 3D Art Director Portfolio
Create an editorial art direction portfolio with a bold visual identity, an interactive 3D sculpture, fluid animations, and dedicated work, studio, and contact sections.
Landing Pages
outdoor rental
peer-to-peer marketplace
GearLend — Outdoor Equipment Rental
A premium peer-to-peer marketplace for renting verified outdoor equipment in Mexico. Users can discover tents, kayaks, mountain bikes, and gear for camping, climbing, cycling, snow sports, and surfing. It features location and date search, a rental-duration picker, listings with daily pricing, availability and condition ratings, rental history, deposit and protection details, verified profiles, pickup and drop-off maps, reviews, featured categories, and strong calls to action to reserve or list equipment.
Landing Pages
affiliate
commission
GlowLab — 3D Beauty Shop
Create an artistic beauty shop designed to convert visitors into customers and affiliates, featuring three-dimensional products, fluid animations, catalog filters, and an editorial visual identity.
Landing Pages
analog photography
camera rental
Grain — Analog Camera Rental
A premium landing page for renting analog cameras and film-photography equipment in Mexico City. It delivers an editorial experience with an interactive camera hero, a catalog featuring models such as the Canon AE-1, Hasselblad 500C, and Polaroid SX-70, daily pricing and availability, film formats and included lenses, inspected and calibrated equipment, date selection, a clear three-step rental process, a complimentary film roll, and optional development service after return.
Landing Pages
budget hostels
hostel booking
NomadStay — Budget Hostels & Social Travel
A premium landing page for an international network of affordable hostels built for backpackers and digital nomads. It features destination, date, and guest search, dorm and private-room options, highlighted cities such as Lisbon, Bangkok, Mexico City, and Berlin, listings with nightly pricing and amenities, lockers, privacy curtains and air conditioning, free walking tours, social events, shared kitchens, workspaces with fast Wi-Fi, traveler reviews, community statistics, and strong calls to action to find and book a stay.
Landing Pages
affiliate
commission
Affiliate Program Landing Page
Created to convert affiliates.
Landing Pages
wellness
therapy
HealMatch — Wellness Therapy Booking
Create a premium landing page for discovering and booking wellness therapies. Include an artistic visual experience with animated 3D elements, an organic sage, lavender, blush and cream color palette, filters by therapy type and mood, professional profiles, pricing, in-person and online options, and an interactive booking flow. The design should be responsive, accessible, and convey calm, trust, and wellbeing.
Landing Pages
independent magazine
editorial design
INK Quarterly — Independent Culture Magazine
A premium landing page for an independent quarterly magazine about culture, design, style, and image. It features an editorial hero with a three-dimensional cover and current-issue details, the publication manifesto, an archive of available editions with cover, year, rental period, and price, a 14-day magazine rental flow, shipping within 24–48 hours, and an annual membership offering four issues, unlimited archive rentals, included delivery, and access to private contributor events, plus a quarterly newsletter, social links, and calls to action to explore the archive or join the circle.
Landing Pages
illustrator portfolio
3D animation
Inkwell — 3D Illustrator Portfolio
Create an editorial portfolio website for an independent illustrator featuring an interactive 3D composition, floating art prints, animated project cards, and a clear section for renting or licensing artwork. Use an expressive pink, violet, lime, and orange palette, distinctive typography, and a responsive experience.
Landing Pages
insurtech
renters insurance
InsureGrid Renters Insurance 3D
Create a premium landing page for digital renters insurance featuring an interactive 3D house, scroll animations, clear coverage options, and a conversion-focused ZIP code quote form.
Landing Pages
freelance photographer
photography portfolio
LensHire — Freelance Photographer
Premium landing page for hiring a freelance photographer, featuring an editorial portfolio, services, pricing, testimonials, and conversion-focused calls to action. Includes an interactive 3D camera, scroll animations, and a responsive experience.
Landing Pages
product management
issue tracking
Linear Clone — 3D Product Management
A conceptual landing page inspired by Linear for modern product-development teams. It features an email-signup hero, a three-dimensional dashboard in perspective, workspace navigation, issue, project, and view management, a Kanban board with statuses, labels, and assignees, project progress, a command menu, and instant synchronization. Additional sections showcase work cycles, speed metrics, keyboard shortcuts, AI-agent automation, social proof, and scroll-triggered animations that communicate a fast, focused product experience.
Landing Pages
affiliate
commission
Affiliate Program 3D Landing Page
Create a premium landing page designed to convert visitors into affiliates.
Landing Pages
fashion store
3D
LuxeThread 3D Fashion Store
Create a premium fashion store with a futuristic editorial aesthetic, a black, lime, violet and orange palette, CSS-built 3D garments, fluid animation, cursor-controlled interactive depth, a product catalog, filters, a sliding cart, and a responsive experience for desktop and mobile.
Landing Pages
community
meetups
Meetpoint — Community Meetups
A 3D landing page for discovering local meetups, connecting communities, and promoting creative events through an interactive visual experience.
Landing Pages
writing app
3D landing page
MonoNote — Minimal 3D Writing App
Create a premium landing page for a minimalist writing app called MonoNote. Preserve an editorial white, black, and warm cream palette, and include an interactive 3D editor with depth, shadows, floating cards, cursor-driven parallax, typing animation, and progressive scroll reveals. The design should feel elegant, quiet, responsive, and focused on distraction-free writing.
Landing Pages
game launch
tactical shooter
NeonStrike — Cyberpunk Tactical Shooter
A cinematic launch landing page for NeonStrike, a cyberpunk tactical shooter with orbital combat and a persistent world. It features an immersive hero with an interactive 3D spacecraft, trailer and pre-order actions, game narrative, dynamic missions shaped by weather, factions, and player decisions, vertical combat across tunnels, rooftops, and low orbit, four-player co-op with cross-play, kinetic stealth and adaptive AI, 4K HDR and 120 FPS support, launch date, Vanguard Edition pricing, and platform selection.
Landing Pages
food events
night market
NightMarket — 3D Food Events
Create an immersive landing page for promoting nighttime food events, featuring an interactive 3D market, fluid animations, category filters, calendar, ticket reservations, and an email signup form. Use a charcoal, cream, and neon-orange visual identity with a responsive layout and a premium urban atmosphere.
Landing Pages
architecture
3D
NORTE Atelier — 3D Architecture Portfolio
Create an immersive editorial portfolio for an architecture studio based in northern Mexico. Use a concrete, charcoal, rust and bone palette, an interactive 3D architectural model in the hero, scroll-triggered animations, dynamic project previews, a contextual cursor and responsive design.
Landing Pages
notion clone
productivity
Notion-Inspired 3D Workspace
Create a premium Notion-inspired landing page for a productivity platform called Nōte. Use an editorial interface with cream, black, coral, blue, and yellow colors; include an interactive 3D workspace, floating cards, a project board, scroll animations, depth effects, and responsive mobile navigation.
Landing Pages
anime convention
3D landing page
OtakuCon — 3D Anime Convention
Create an immersive landing page for an anime convention featuring a vibrant 3D aesthetic, an original character, parallax animations, interactive cards, an event schedule, and ticket purchase calls to action.
Landing Pages
pet supplies
ecommerce
PawPark — 3D Pet Supplies Store
Create a premium landing page for a pet supplies store featuring an animated 3D pet, interactive products, category filters, favorites, a shopping cart, a subscription club, and a newsletter. Use a warm cream, lime green, orange, pink, and dark green palette with fluid animations and a responsive layout.
Landing Pages
photography
portfolio
PixelFrame — 3D Photography Portfolio
Create a premium photography portfolio with a dark editorial aesthetic, asymmetric composition, immersive gallery, cursor-reactive 3D layers, scroll animations, and a responsive layout.
Landing Pages
game store
indie games
PixelShelf — 3D Indie Game Store
Create a premium digital storefront for indie video games with a modern gaming art direction using midnight blue, lime green, coral, and sky blue. Include a floating 3D game box with animation and interactive perspective, a responsive catalog with genre filters, favorites, a functional cart, checkout modal, showreel, and newsletter form. The experience should feel editorial, energetic, immersive, and work beautifully across desktop and mobile.
Landing Pages
restaurant
neapolitan pizza
PizzaAlta — Neapolitan Pizzeria 3D
Create an immersive landing page for a Neapolitan pizzeria featuring an interactive 3D pizza, scroll-triggered animations, an animated wood-fired oven, a visual menu, a reservation form, and responsive design. Use an Italian red, cream, green, and gold palette, editorial typography, and a handcrafted fine-dining aesthetic.
Landing Pages
landing page
DevTool
Loopline — DevTool SaaS
Create a dark mode landing for "Loopline", a SaaS DevTool for observability and debugging with AI for applications in production. Pure HTML + CSS, JetBrains Mono font for titles/code and Inter for body. **Palette:** - Background: `#0a0a0a` (pure black) - Cards: `#111111` with border `#1f1f1f` - Primary: green terminal `#00ff88` - Secondary: `#3b82f6` (blue) - Text: `#ededed` / muted `#737373` **Sections:** 1. Navbar with `</> Loopline` logo and links: Docs, Pricing, Changelog, GitHub (with icon ⭐ stars count "12.4k"). 2. Hero: pill `$ npm install loopline`, H1 "Debug production. **At the speed of thought.**", subtitle, CTAs "Start free →" and "Read the docs". On the right, a terminal mockup: top bar with dots, `>loopline trace` prompt, colored log lines (INFO green, WARN yellow, ERROR red) with timestamps, CSS flashing cursor. 3. Trust bar: "Trusted by engineers at" + Vercel, Stripe, Linear, Supabase, Cloudflare. 4. Value section: "Stop guessing. Start tracing." with CTA "View live demo →". 5. Grid 4 features: ⚡ Real-time traces · 🔍 AI root-cause · 🔐 SOC2 compliant · 🪝 One-line SDK. Each card includes a mini code snippet with colored syntax. 6. "How it works" in 5 steps: Install SDK → Capture events → AI analyzes → Get insights → Ship fixes. 7. Grid of integrations: Node.js, Python, Go, Rust, Next.js, Django, FastAPI, Ruby, Java, Elixir, Deno, Bun. 8. Footer with links to Docs, Status, GitHub, Twitter/X, Discord. Detail: Use `font-feature-settings: "ss01", "cv11"` in JetBrains Mono and subtle borders `1px solid #1f1f1f` on everything. Hover on cards: glow green `box-shadow: 0 0 30px rgba(0,255,136,0.15)`. Returns `index.html` + `styles.css`.
Landing Pages
landing page
Magzin Job
Job — HTML + CSS
Create a modern landing page in pure HTML + CSS (no frameworks) for a SaaS product called "Job", an AI-powered interview platform for recruiting. Generates 3 files: index.html, styles.css and optionally script.js. **General aesthetics:** * Premium startup tech style dark theme (background #0b0c10, surfaces #171922, borders #23262f). * Gradient violet/lilac main accent (#6c5ce7 → #a29bfe) and mint green secondary (#00d4a3). * Inter Typography (Google Fonts), weights 400–800. Large titles with letter-spacing:-.02em and font-weight:800. * Rounded corners (border-radius:14px on cards, 999px on buttons/pills). * Subtle radial glow behind the hero (blurred purple and green radial gradients). **Structure (in this order):** 1. Navbar sticky with blur (backdrop-filter): "M" logo in violet gradient square + text "Magzin Job", links (Home, Searching, Blog) and rounded white "Log In" button. Toggle hamburger on mobile. 2. Hero to 2 columns: Left: pill "✦ AI Interviewer", large title "AI-powered interviews to help you hire." (the word "hire" with violet→green gradient), descriptive paragraph, two CTAs ("Get started now" primary gradient + "Request a demo →" ghost). Right: dashboard mockup with macOS-type top bar (3 red/yellow/green dots + "Interview Dashboard"), 4 rows with a gradient circular avatar + progress bar + score (9.2, 8.1, 7.3, 6.4), and lower stats in a grid of 3 (1,284 Interviews / 92% Match rate / 4.8m Avg time). 3. Trust bar: "TRUSTED BY GLOBAL TEAMS" + logos in text (NASA, PORSCHE, NIKE, Nestlé, Deloitte.). 4. Focused value section: H2 "Hiring is hard. Magzin AI Interviewer is here to help." + paragraph + link "Read the case study →". 5. Benefits in a 4-card grid with emoji icon in a translucent violet square: Save time (⏱), Improve quality (✦), Drive fairness (⚖), See results (📊). Hover: lifts and violet edge. 6. How it works (background #11131a): centered title + ordered list of 5 steps in horizontal grid with number "01–05" in purple and h4+description. 7. Industry solutions: 4×3 grid of 12 industries (Automotive, Banking & Insurance, Consumer Goods, Education, Government, Healthcare, Hospitality, Manufacturing, Energy & Utilities, Pharmaceutical & Biotech, Real Estate, Retail) + CTA "Don't see your industry listed? Get in touch". 8. Footer with logo + "© 2025 Magzin Job. All rights reserved." **Responsive:** * <900px: hero to 1 column, nav-links are hidden and hamburger appears, grids to 2 columns. * <520px: all grids with 1 column. **Technical details:** * Container max-width 1180px, side padding 24px. * Primary button with box-shadow:0 10px 30px -10px rgba(108,92,231,.6) and hover translateY(-2px). * CSS variables in :root for all colors and radius. * No JS dependencies beyond an optional toggle for the mobile menu. * Clean, semantic, accessible code (aria-label on icon buttons).
Landing Pages
landing page
Job
Editorial Minimal
Create a landing page for "Job" with a minimalist magazine-like editorial aesthetic (Stripe / Linear / Vercel docs). Off-white background (#fafaf7), serif font for titles. * Palette: soft black (#0f0f0f), gray (#6b7280), beige (#f3efe6), a single terracotta orange accent (#d97757). * Titles in "Fraunces" or "Instrument Serif" (weight 400, italic in keywords). Bodysuit in "Inter". * No shadows, just border:1px solid #e5e5e0. Corners border-radius:4px (very subtle). * Minimal Navbar: text only, no square logo, 1px bottom separator. * Hero to a single column, centered, max-width 720px. Large serif title with word in italic + orange. Below the hero, screenshot of the full-width dashboard with subtle border. * Benefits in numbered list (not cards), article type, with large orange number on the left. * Steps as vertical timeline with thin gray line. * Sober footer with many columns of links.
Landing Pages
landing page
CodeNova
CodeNova — Midnight Hacker
"Midnight Hacker" — Dark mode neon. Create a single-file HTML landing page for a coding platform called CodeNova with a dark hacker aesthetic. * Palette: background #0a0a0f, text #e4e4e7, muted #71717a, lines #27272a, brand neon green #22ff88, magenta accent #ff2e93. * Source: JetBrains Mono for titles + Inter for body. * Hero with grid of faint lines in the background (CSS background with repeated linear-gradient), title "Hack Your Way to the Future" with glow effect (neon green text-shadow). * Buttons with shiny border and hover that inverts colors. * Cards with background #13131a, subtle border that lights up green when hovering. * CTA band with glassmorphism effect. * Almost black footer with social icons that glow magenta when passing by.
Landing Pages
landing page
Northwind
Northwind — Sunset Gradient / Glassmorphism
Sunset Gradient Glassmorphism. Create a dark mode landing for "Northwind", a sales automation SaaS with AI. Pure HTML + CSS, Satoshi font (or Inter as fallback). **Sunset palette:** * Background: #1a0b2e (deep purple) * Secondary background: #0f0820 * Cards: rgba(255,255,255,0.04) with backdrop-filter: blur(20px) and border rgba(255,255,255,0.08) (glassmorphism) * Primary: gradient #ff6b6b → #feca57 → #ff9ff3 (sunset) * Accent: #5f27cd * Text: #fff / muted #a78bfa **Style:** Many animated gradient blobs with @keyframes floating in the background. Translucent cards with shiny edges. Hero with giant headline "Sell smarter. Close faster." and kanban pipeline mockup (3 columns: Lead → Qualified → Closed) with glass cards. 4 benefits, 5 steps, final grid of "Use cases" instead of industries. Rounded buttons with sunset and glow gradient.
Landing Pages
landing page
Atlas Bank
Atlas Bank — Corporate Blue / Financial Confidence
"Atlas Bank" — Corporate Blue / Financial Trust. Create a landing light mode for "Atlas Bank", a B2B neobank for companies. Pure HTML + CSS, Söhne (or Inter) fonts for body and GT Super (or Playfair Display) for headlines. **Corporate palette:** * Background: #ffffff * Secondary background: #f5f7fa * Cards: #ffffff with border #e1e8ed and shadow 0 4px 20px rgba(15,23,42,0.06) * Primary: #0a2540 (deep navy blue) * Accent: #00d4ff (electric cyan) * Text: #0a2540 / muted #425466 **Style:** Elegant serif on H1 ("Banking, reimagined for modern teams."), sans on body. Hero with tilted 3D credit card mockup with blue→cyan gradient + balance sheet dashboard. Trust bar with serious logos (Goldman, JPMorgan, Visa, Mastercard, Plaid). Product Grid: Accounts, Cards, Transfers, FX, Treasury, API. Rich footer with 4 columns of links. Vibe: Stripe + Mercury.
Landing Pages
landing page
Cipher
Cyberpunk / Neon Glow
Cyberpunk/Neon Glow. Create a dark mode landing for "Cipher", a zero-trust security platform with AI. Pure HTML + CSS, Space Grotesk font for headlines and IBM Plex Mono for details. **Cyber palette:** * Background: #000000 (absolute black) * Secondary background: #050510 * Cards: #0a0a1a with 1px solid border #1a1a2e * Primary: #ff00ff (neon magenta) * Secondary: #00ffff (neon cyan) * Text: #ffffff / muted #6b7280 **Style:** Grid pattern background with subtle rgba lines (255,0,255,0.05). Hero with H1 glitch "Encrypt. Detect. Defend." and world map mockup with animated attack points (magenta/cyan pulsating dots). Cards with glowing border on hover (box-shadow: 0 0 40px rgba(255,0,255,0.4)). Text with neon text-shadow in CTAs. Large stats section ("99.99% uptime · 2.3B threats blocked"). Final grid of threat types. Vibe: Cloudflare + Tron.
Landing Pages
landing page
Canvas Studio
Canvas Studio — Earthy / Editorial Brutalist
"Canvas Studio" — Earthy / Brutalist Publishing. Create a landing light mode for "Canvas Studio", a collaborative design platform for creative agencies. Pure HTML + CSS, Fraunces font for headlines (variable, expressive) and Inter for body. **Editorial palette:** * Background: #faf6f1 (cream/paper) * Secondary background: #f0e9dd * Cards: #ffffff with thick border 2px solid #1a1a1a (brutalist) * Primary: #1a1a1a (ink black) *Accent 1: #dc2626 (vermilion red) * Accent 2: #fbbf24 (mustard yellow) * Text: #1a1a1a / muted #78716c **Style:** Asymmetrical, magazine-type editorial layouts. Huge H1 with negative tracking and weight mix ("Design together, ship faster"). Hard brutalist shadows (box-shadow: 6px 6px 0 #1a1a1a without blur). Rectangular buttons with thick black border. Hero with chaotic moodboard mockup (overlapping images, yellow post-its, red lines). Trust bar with logos in cutout style. Feature grid with huge numbers (01, 02, 03) in serif. Vibe: Pentagram + Are.na + Read.cv.
Landing Pages
landing page
Coworkly
Coworking spaces
Coworking spaces. * Palette: indigo: #4F46E5, peach: #FDBA74, bone: #FAFAF9, ink: #1C1917 * Vertical: rent desks/rooms by the hour or day * New components: WifiSpeedBadge, AmenityGrid (coffee, printer, phonobooths), HourlyRateToggle, AvailabilityCalendar, NoiseLevel * Map: clusters by neighborhood
Landing Pages
affiliate
commission
Affiliate Program
Create a premium web landing page called “AffiliatePro”. Design a modern, dark, SaaS, fintech and technology-driven experience to present a digital affiliate program focused on influencers, content creators, marketers and partners who want to monetize their audience. The page should use a premium dark aesthetic with a night-blue background, deep black, cyan/neon accents, success green and glassmorphism cards. The hero should include the “AffiliatePro” logo, top navigation with “Benefits”, “Commissions”, “How to Join” and a highlighted “Apply Now” button. Add a top badge reading “Partner Program 2026”, a large main headline “Monetize your influence with the best digital product.”, a subtitle about earning up to 40% recurring commission for every generated sale, and buttons “Become an Affiliate” and “View Commissions”. Include highlighted metrics such as “40% per sale”, “$10k+ average earnings” and “30-day cookies”. Create a section called “Why choose our program” with premium benefit cards for 15% conversion, weekly payments, 30-day cookies and promotional material. Add a “Your Own Premium Dashboard” section with bullets about real-time analytics, UTM link generator and transparent payment history, alongside floating cards for total balance, conversion percentage and latest sale. Create a “Three steps to get started” section with numbered cards for signing up, promoting and earning commissions. At the end, add a CTA block with the text “Ready to level up?”, a form with fields “Your Name”, “Your Email” and “Your website/social media URL”, plus a button “Apply and Create Account”. Include a footer with logo, copyright and basic links. The landing page must be responsive, with wide spacing, rounded cards, soft shadows, cyan glow, dark gradients, microinteractions, button hover states, scroll entrance animations, subtle parallax and a professional, trustworthy, conversion-ready affiliate experience.
Landing Pages
benchmarks
performance
Benchmarks 3D
Create a premium web landing page called “Benchmark Lab 3D”. Design a modern, technological, dark, immersive and futuristic experience to present an AI model evaluation platform for LLMs, vision, audio and global performance benchmarking. The page should use a dark SaaS aesthetic with an almost-black night-blue background, neon cyan accents, electric green, technological purple and glassmorphism cards with thin glowing borders. At the top, include an abstract 3D scene with particles, floating cubes, geometric lines, digital nodes and a central badge reading “New Platform V2.0”. Create a benefits section with three large cards: “Ultra-Low Latency”, “Throughput” and “Stability”, each with an icon, soft glow and 3D hover effect. Add a main section titled “Global Model Performance” with functional tabs “LLMs”, “Vision” and “Audio”. Include a visual benchmarking table with animated horizontal bars for fictional models such as “Model Alpha X”, “Neural V2”, “OptiGen 4” and “Legacy Net”, showing scores like 95, 82, 78 and 45. Create a centered form called “Request a Benchmark” with descriptive text, a “Product Name” field, placeholder “E.g. GPT-4 Turbo”, an “Evaluation Type” selector with the option “Latency & Throughput” and a cyan “Submit Request” button. Add a floating price card at the bottom-right with the text “Web page”, price “20 US$”, a “Buy” button and small accepted payment method icons. The landing page must be responsive, with generous vertical spacing, a clean composition, modern typography, deep shadows, neon lines, scroll animations, subtle parallax, microinteractions, button hover states and the feeling of a premium 3D lab for measuring AI performance.
Landing Pages
education
library
3D Interactive Library Educational Clips
{ "name": "3D Interactive Library Educational Clips", "objective": "Develop a modern, educational, immersive and interactive landing page to present a 3D digital library of educational clips, micro-lessons, short videos, learning resources, training capsules, visual explanations, quick guides and academic content.", "main_concept": "The website should feel like entering a futuristic educational library where each shelf contains clips, lessons and interactive resources. As the user scrolls, they should visually move through a 3D library with aisles, shelves, holographic screens, digital books, tablets, floating video clips, subject categories, whiteboards, study stations and progress panels.", "main_requirements": [ "Create a complete, modern, functional and responsive landing page.", "Include a visible 3D canvas integrated into the main experience.", "Add 3D scroll animations.", "Add parallax effects on text, shelves, books, clips, cards, tablets, screens, icons, whiteboards, lights and backgrounds.", "Create an experience focused on education, microlearning, a digital library, educational clips, content search, playlists, visual learning and student progress.", "All buttons must work correctly.", "Optimize for desktop, tablet and mobile.", "Use smooth, clear, educational and performant animations.", "Keep the scene readable, organized, accessible and premium.", "Work freely to improve the 3D scene, educational narrative, interactions, visual design, parallax and conversion flow." ], "structure": { "header": { "logo": "EDU CLIPS LIBRARY 3D", "menu": [ "Home", "Library", "Clips", "Categories", "Playlists", "Teachers", "Pricing", "Contact" ], "featured_button": "Start Learning", "description": "Fixed header with a translucent glassmorphism-style background, functional hamburger mobile menu and smooth scrolling to each section." }, "hero": { "main_title": "Explore Educational Clips Inside an Interactive 3D Library", "subtitle": "Discover short lessons, visual explanations, study playlists and learning resources through an immersive digital library experience.", "buttons": [ "Enter Library", "Browse Clips", "Start Learning" ], "background": "A 3D educational library with modern shelves, digital books, screens with clips, floating tablets, lesson cards, glowing whiteboards, study paths, academic icons and visual depth.", "parallax": "Add parallax between the title, clips, books, shelves, screens, cards, lights and background." }, "canvas_3d": { "name": "Interactive Educational Library", "description": "Create a 3D scene inside a canvas that represents a premium, futuristic and friendly educational library.", "elements": [ "Main library entrance", "Aisles with digital shelves", "Floating books", "Holographic screens with educational clips", "Tablets with micro-lessons", "Course cards", "Interactive whiteboards", "Study stations", "Subject categories", "Search panel", "Playlist wall", "Progress dashboard", "Abstract teacher or tutor avatars", "Downloadable resources", "Bookmarks, notes, headphones and digital pencils", "Soft lights, clean shadows and visual depth" ], "hotspots": [ "Search Library", "Featured Clips", "Science Shelf", "Math Shelf", "Language Shelf", "History Shelf", "Study Playlists", "Progress Dashboard", "Start Learning" ], "main_animation": "The “Enter Library” button must trigger a visible camera animation entering from the main door toward the shelf aisles and the educational clips wall." }, "3d_scroll_storytelling": { "zones": [ "Main entrance", "Educational search", "Shelves by category", "Featured clips", "Learning playlists", "Micro-lesson station", "Progress dashboard", "Teachers and tutors", "Access plans", "Final contact" ], "transformations": [ "translateZ for depth", "scale to highlight clips, cards and CTAs", "soft rotate for books, tablets, cards, bookmarks and icons", "fade for clean transitions", "subtle blur for distant aisles", "walkthrough-style camera movement through a digital library" ], "parallax_layers": { "front": [ "titles", "buttons", "CTAs", "search bar", "filters", "clip cards" ], "middle": [ "shelves", "books", "tablets", "screens", "whiteboards", "playlists", "hotspots" ], "background": [ "library architecture", "lights", "aisles", "windows", "shadows", "particles" ] } }, "sections": [ { "name": "Library Overview", "title": "A Smart Library Built for Fast Visual Learning", "description": "Explain how the library helps users find educational clips, organize resources, learn by category, save favorites and build study paths.", "cards": [ "Short Educational Clips", "Searchable Learning Library", "Curated Study Playlists", "Progress Tracking" ] }, { "name": "Search & Filters", "description": "Create a functional visual search experience.", "search_options": [ "Search by topic", "Search by subject", "Search by grade level", "Search by duration", "Search by teacher" ], "filters": [ "All", "Math", "Science", "History", "Language", "Technology", "Art", "Study Skills", "Popular", "New" ], "button": "Clear Filters", "behavior": "Typing or selecting a filter should change the visible content or show simulated results. Clear Filters must restore the view." }, { "name": "Featured Educational Clips", "clips": [ "How Photosynthesis Works", "Fractions in 5 Minutes", "The Water Cycle Explained", "Basic JavaScript Loops", "World War II Timeline", "Spanish Vocabulary: Daily Routines", "Intro to Geometry", "How to Take Better Notes" ], "fields": [ "Title", "Subject", "Duration", "Level", "Teacher", "Short description" ], "buttons": [ "Play Clip", "Save Clip" ], "behavior": "Play Clip must open a simulated player or video modal. Save Clip must change the state to saved." }, { "name": "Clip Player", "description": "Create a simulated educational player.", "elements": [ "Video placeholder", "Progress bar", "Play/pause button", "Captions", "Quick notes", "Related resources", "Review question" ], "buttons": [ "Play Lesson", "Take Notes", "Mark Complete", "Download Resource" ] }, { "name": "Categories / Shelves", "shelves": [ "Math Shelf", "Science Shelf", "History Shelf", "Language Shelf", "Technology Shelf", "Art Shelf", "Business Shelf", "Study Skills Shelf" ], "fields": [ "Fictional number of clips", "Level", "Description" ], "button": "Open Shelf", "behavior": "Open Shelf must filter clips or focus the shelf in the canvas." }, { "name": "Study Playlists", "playlists": [ "Math Foundations", "Science Essentials", "Coding Basics", "History Crash Course", "English Practice Clips", "Exam Prep Toolkit" ], "fields": [ "Number of clips", "Total duration", "Level", "Goal", "Fictional progress" ], "button": "Start Playlist" }, { "name": "Learning Paths", "paths": [ "Beginner Path", "Exam Review Path", "Teacher Recommended Path", "Fast Revision Path", "Visual Learning Path", "Project-Based Learning Path" ], "fields": [ "Steps", "Duration", "Goals" ], "button": "Choose Path" }, { "name": "Teachers / Tutors", "teachers": [ "Dr. Elena Brooks — Science", "Marco Ruiz — Math", "Aisha Khan — History", "Sofia Martin — Language", "Kenji Mori — Technology" ], "fields": [ "Subject", "Short bio", "Published clips" ], "button": "View Teacher" }, { "name": "Progress Dashboard", "metrics": [ "Clips watched", "Playlists completed", "Study streak", "Notes saved", "Quiz score", "Favorite subjects" ], "button": "View Progress" }, { "name": "Resources", "resources": [ "Study guide", "Worksheet", "Summary sheet", "Quiz PDF", "Flashcards", "Teacher notes" ], "fields": [ "Format", "Subject" ], "button": "Download Resource" }, { "name": "Pricing / Access", "plans": [ "Free Library", "Student Plus", "Family Learning", "Teacher Toolkit", "School License" ], "fields": [ "Fictional price", "Available clips", "Playlists", "Downloads", "Progress", "Support" ], "button": "Choose Plan" }, { "name": "Testimonials", "testimonials": [ "The 3D library made it easy for students to discover short lessons.", "Clips, notes and playlists helped my class review faster.", "The visual shelves made learning feel organized and engaging." ] }, { "name": "Contact", "fields": [ "Name", "Email", "Role", "Learning Need", "Message" ], "button": "Contact Learning Team", "fictional_data": [ "Email", "School partnership note", "Support availability", "Social links" ] } ], "footer": { "description": "Keep the design clean, spacious, educational and professional." } }, "required_interactions": [ "The menu must navigate smoothly to each section.", "Enter Library must activate a guided animation in the 3D canvas.", "Browse Clips must go to Clips.", "Start Learning must go to Playlists or Pricing.", "Canvas hotspots must show information.", "The search bar must filter or show simulated results.", "Filters must change the visible content.", "Clear Filters must restore the view.", "Play Clip must open a simulated player.", "Save Clip must change the state to saved.", "Play Lesson must change the state to playing.", "Take Notes must open a notes panel.", "Mark Complete must update visual progress.", "Download Resource must show confirmation.", "Open Shelf must filter clips or focus a shelf.", "Start Playlist must select a playlist and update progress.", "Choose Path must select a path and show a summary.", "View Teacher must open a profile or filter clips.", "View Progress must open the dashboard.", "Choose Plan must select a plan or go to Contact.", "The form must validate fields and show confirmation.", "The mobile menu must open and close correctly.", "Scrolling must activate 3D animations and parallax." ], "animations": [ "When scrolling, the camera should move from the library entrance toward shelves, clips and the progress dashboard.", "Shelves should appear from depth using translateZ, scale and fade.", "Books should float with smooth rotation.", "Clip screens should light up progressively.", "Clip cards should slide out from the shelves as 3D panels.", "Filters should reorganize clips with a smooth transition.", "The player should open with a clean zoom effect.", "Progress bars should fill when entering the screen.", "Learning path nodes should light up step by step.", "Downloadable resources should slide like 3D documents.", "Dashboard metrics should animate with progressive counters.", "Backgrounds, aisles, windows, shelves and lights should move more slowly to create depth.", "Add soft library-dust particles, blue/cyan glow, glass reflections, digital paper textures, clean shadows and warm study light.", "Avoid abrupt, fast or chaotic movements." ], "visual_style": { "description": "Educational, technological, clear, premium, friendly and inspiring.", "inspiration": [ "modern libraries", "EdTech platforms", "microlearning", "online academies", "digital study rooms", "educational dashboards", "interactive libraries", "visual learning experiences" ], "palette": [ "Night blue", "Educational cyan", "Ivory white", "Learning green", "Soft yellow for highlights", "Graphite gray", "Paper beige", "Technological purple as an accent" ], "components": [ "light and dark glassmorphism", "clean cards", "soft lights", "digital shelves", "paper textures", "elegant shadows", "academic icons", "organized composition" ], "feeling": "Clarity, discovery, learning, organization, motivation and progress." }, "expected_result": "A complete, immersive and functional landing page for “3D Interactive Library Educational Clips”, with a 3D canvas, interactive educational library, search bar, filters, clips, player, subject shelves, playlists, learning paths, teachers, progress dashboard, resources, pricing, functional form, 3D scroll animations, parallax, hotspots, functional buttons, responsive design and a premium EdTech platform aesthetic." }
Landing Pages
landing page
dashboard
Dashboard
{ "title": "Premium 3D Dashboard SaaS Landing Page", "description": "Create a premium, modern and futuristic landing page for a 3D dashboard SaaS platform called Dashboard 3D. The page must feel clean, high-tech, spacious and professional, with a dark navy background, soft gradients, glowing blue and violet accents, glassmorphism cards, floating abstract particles, subtle 3D depth and a polished startup aesthetic.", "main_concept": "The landing page presents a data control center where teams can centralize data, visualize metrics, monitor performance and make real-time decisions through an immersive 3D dashboard experience.", "visual_style": { "theme": "Dark futuristic SaaS dashboard, 3D data control center, analytics platform, enterprise startup landing page", "colors": [ "Deep navy", "Almost black", "Electric blue", "Cyan glow", "Soft violet", "Cool white", "Muted slate gray" ], "typography": "Modern rounded sans-serif typography with bold headlines, clean body text and clear dashboard labels.", "effects": [ "Glassmorphism cards", "Soft neon glow", "Gradient buttons", "Floating particles", "Subtle network lines", "3D depth", "Dark radial gradients", "Soft shadows", "Smooth parallax" ] }, "structure": { "header": { "logo": "Dashboard 3D", "menu": [ "Features", "Widgets", "Pricing" ], "button": "Get Started", "style": "Fixed or sticky top navbar with a dark glassmorphism background, rounded container, soft border, logo icon with blue gradient and clear spacing between links." }, "hero": { "headline": "Enter the Data Control Center", "subtitle": "Centralize your data, visualize performance, and make decisions in real-time. A premium 3D dashboard experience for modern teams.", "buttons": [ "Start Free Trial", "View Demo" ], "visual": "Dark abstract background with subtle network lines, small floating glowing spheres and geometric elements. Add depth with soft blue and violet particles around the headline.", "layout": "Centered hero content with large headline, clear subtitle, two CTA buttons and generous vertical spacing." }, "metrics_visualization_section": { "title": "Visualize Metrics like Never Before", "description": "Connect your sources and instantly transform raw data into stunning, actionable visual insights. Our intelligent widgets adapt to your workflow.", "feature_badges": [ { "label": "Real-time Sync", "text": "Connect APIs instantly." }, { "label": "Custom Alerts", "text": "Get notified instantly." } ], "dashboard_card": { "title": "Revenue Trend", "description": "Create a glassmorphism analytics card with a glowing chart area, soft grid, cyan line glow and dark translucent container." } }, "modular_intelligence_section": { "title": "Modular Intelligence", "cards": [ { "label": "Total Users", "value": "124.5K", "status": "+12.5% this week" }, { "label": "Conversion Rate", "value": "4.8%", "status": "+1.2% this week" }, { "label": "Active Sessions", "value": "8,432", "status": "Stable" } ], "style": "Use three premium metric cards with glassmorphism, centered text, glowing values and generous spacing." }, "signup_section": { "title": "Ready to Scale?", "subtitle": "Start your 14-day free trial. No credit card required.", "form_fields": [ "Work Email", "Password" ], "button": "Create Account", "behavior": "Validate fields, show a success message after submission and add visual feedback on button click.", "style": "Centered signup card with dark glass background, rounded corners, soft border, glowing gradient button and comfortable input spacing." }, "price_card": { "position": "Floating bottom-right card on desktop", "text": "Web page", "price": "20 US$", "button": "Buy", "payment_methods": "Show small accepted payment method icons.", "responsive_behavior": "On mobile, place the price card below the content instead of floating." }, "footer": { "text": "© 2026 Dashboard 3D. All rights reserved.", "style": "Minimal footer with dark background, top border and centered text." } }, "interactions": [ "Smooth scrolling between sections", "Navbar links navigate to their sections", "Start Free Trial scrolls to the signup form", "View Demo opens a simulated dashboard modal", "Get Started scrolls to the signup form", "Create Account validates email and password fields", "Show a confirmation message after successful form submission", "Metric cards animate on scroll", "Dashboard chart animates when entering the viewport", "Buttons have hover, active and focus states", "Cards have subtle 3D hover lift", "Background particles move slowly with parallax" ], "spacing_requirements": [ "Use a centered max-width container around 1200px", "Use large vertical padding between sections", "Keep the landing page spacious and uncluttered", "Use generous gaps between cards", "Maintain clear separation between hero, feature section, metrics and form", "Use comfortable padding inside all cards", "Keep text readable with strong contrast", "Avoid crowded components or tight layouts" ], "responsive_requirements": [ "Desktop layout should feel wide, premium and cinematic", "Tablet layout should stack content cleanly", "Mobile layout should use one-column sections", "Reduce headline size on mobile while keeping strong hierarchy", "Keep buttons easy to tap", "Place the floating price card below the main content on small screens" ], "expected_result": "A complete responsive premium landing page for Dashboard 3D with a dark futuristic SaaS aesthetic, centered hero, glassmorphism navbar, glowing CTAs, dashboard visualization section, modular metric cards, signup form, floating price card, footer, smooth animations and professional high-tech spacing." }
Landing Pages
landing page
estadio
Estadio Futurista
{ "title": "Premium futuristic landing page for a neon smart stadium", "description": "Create a premium, cinematic and futuristic landing page for a high-tech smart football stadium called NEON Cup. The page must feel like an aerial tactical view of a next-generation stadium with holographic field lines, neon player trails, data overlays, fiber optic lighting and an immersive sports-tech atmosphere.", "main_concept": "The landing page presents a futuristic football arena powered by neon energy, tactical holograms and real-time match analytics. The visual experience should feel like a drone flying over a cybernetic stadium where every player movement, pass, shot and tactical pattern is visualized with glowing data trails.", "visual_style": { "theme": "Futuristic football stadium, neon sports technology, holographic tactical system, cyber arena, premium cinematic sports-tech landing page", "colors": [ "Deep black", "Dark navy", "Electric purple", "Neon cyan", "Magenta glow", "Soft white", "Smoky blue", "Cyber violet" ], "typography": "Modern bold sans-serif typography with uppercase technical labels, large numeric data, futuristic spacing and clean readable UI text.", "effects": [ "Holographic field grid", "Neon player trails", "Cyber glow", "Smoke and fog", "Drone aerial perspective", "3D stadium depth", "Light particles", "Fiber optic lines", "Data HUD overlays", "Glassmorphism panels", "Soft cinematic vignette", "Parallax depth" ] }, "structure": { "hero": { "headline": "NEON Cup", "subtitle": "A next-generation stadium experience powered by holographic tactics, fiber optic energy and real-time match intelligence.", "visual": "Full-width cinematic aerial view of a futuristic football stadium at night. The pitch must have a glowing purple and cyan grid, neon player silhouettes, colorful motion trails, tactical circles, scoreboards, data panels and a cyberpunk atmosphere.", "left_stat": { "value": "120 m", "label": "Dome Diameter" }, "right_title": { "text": "NEON", "description": "Fiber optic perimeter route" }, "center_caption": "Aerial View", "bottom_caption": "Active System", "side_labels": [ "Holo-Tactics", "Neo-Energy" ], "buttons": [ "Explore Stadium", "View Tactical System" ] }, "technology_section": { "title": "Holographic Match Intelligence", "description": "Visualize every movement, passing lane, defensive block and attacking transition through a real-time tactical layer powered by neon data.", "cards": [ { "title": "Holo-Tactics", "description": "Live player tracking, tactical zones and movement prediction." }, { "title": "Fiber Optic Dome", "description": "A 120-meter illuminated dome designed for immersive match experiences." }, { "title": "Neo-Energy Field", "description": "Dynamic lighting reacts to speed, pressure, goals and crowd intensity." } ] }, "analytics_section": { "title": "The Game Becomes Data", "description": "Turn the stadium into a living dashboard with live score, possession maps, heat zones, sprint trails and tactical alerts.", "metrics": [ "Live Score", "Player Speed", "Heat Maps", "Possession Flow", "Shot Paths", "Tactical Pressure" ] }, "experience_section": { "title": "A Stadium Built for the Future", "description": "Create an immersive experience where fans, coaches and analysts see the match from a new dimension of light, motion and intelligence.", "features": [ "Drone-style aerial camera", "3D tactical overlays", "Interactive player trails", "Real-time match dashboard", "Neon crowd atmosphere", "Cinematic stadium lighting" ] }, "price_card": { "position": "Floating bottom-right card on desktop", "text": "Web page", "price": "20 US$", "button": "Buy", "payment_methods": "Show small accepted payment method icons.", "responsive_behavior": "On mobile, move the price card below the main content instead of floating." }, "footer": { "content": "Minimal dark footer with NEON Cup branding, quick links and copyright text." } }, "interactions": [ "Smooth scrolling between sections", "Hero stadium image moves with slow parallax", "Neon player trails animate subtly", "Holographic grid pulses softly", "HUD labels fade in on load", "Cards lift with 3D hover effect", "Buttons have neon glow hover and active states", "Metrics animate when entering the viewport", "Floating fog and particles move slowly in the background", "Price card remains fixed on desktop" ], "spacing_requirements": [ "Use a full-width cinematic hero", "Use generous vertical spacing between sections", "Keep the layout premium and not overcrowded", "Use centered containers with max-width around 1200px", "Use wide gaps between cards", "Maintain strong contrast between text and background", "Use enough empty space around captions, stats and buttons", "Avoid placing text too close to the price card" ], "responsive_requirements": [ "Desktop must feel cinematic, wide and immersive", "Tablet layout should stack cards cleanly", "Mobile layout should use one-column sections", "Reduce large text sizes on small screens", "Keep buttons easy to tap", "Move the floating price card below the main content on mobile" ], "expected_result": "A complete premium landing page for a futuristic NEON Cup smart stadium with aerial cinematic hero, holographic football pitch, neon player trails, tactical data overlays, technology sections, analytics metrics, immersive sports-tech storytelling, floating price card, responsive layout and smooth cyberpunk-style animations." }
Landing Pages
landing page
futbol
Futbol
{ "title": "Premium dark landing page for a 3D football club experience", "description": "Create a premium, modern and minimalist landing page for a fictional football club called Fútbol 3D. The page must feel like an immersive digital stadium experience with a dark aesthetic, bold typography, neon green accents, clean sports cards, match schedules, merchandise promotion and a fan subscription section.", "main_concept": "The landing page presents a futuristic football club experience where fans can enter the stadium, discover the club, meet the players, check upcoming matches, buy official merchandise and join the fan community. The design should feel elegant, dark, spacious, sporty and digital.", "visual_style": { "theme": "Dark football club website, 3D stadium experience, minimalist sports landing page, digital fan platform", "colors": [ "Deep black", "Charcoal black", "Neon green", "Soft white", "Muted gray", "Dark glass", "Subtle emerald glow" ], "typography": "Huge bold uppercase sans-serif typography, strong sports hierarchy, outlined headline words, compact labels and clean readable body text.", "effects": [ "Dark minimal background", "Neon green accents", "Glassmorphism cards", "Subtle 3D depth", "Soft glow buttons", "Outlined typography", "Hover card lift", "Smooth scroll reveal", "Minimal stadium atmosphere", "Thin dividers and clean spacing" ] }, "structure": { "header": { "logo": "Fútbol 3D", "menu": [ "Club", "Jugadores", "Partidos", "Tienda" ], "button": "Únete", "style": "Minimal fixed dark navbar with the Fútbol 3D logo on the left, small uppercase menu links on the right and a neon green join button. Keep the header clean, compact and aligned." }, "hero": { "headline": "Pisa la Cancha", "description": "La experiencia definitiva del fútbol. Siente la energía, la pasión y la gloria como nunca antes en nuestro estadio interactivo 3D.", "buttons": [ "Comprar Entradas", "Ver Calendario" ], "visual_direction": "Use a dark hero with huge bold white typography and an outlined neon green word. Add a subtle 3D stadium entrance feeling, faint green light, minimal particles and a small vertical scroll indicator that says Scroll para entrar al estadio.", "style": "Large empty space, strong typography, left-aligned hero content and premium minimalist composition." }, "stadium_section": { "title": "Nuestra Casa", "description": "Un estadio de última generación con capacidad para 80,000 almas vibrando al unísono. Iluminación inteligente, acústica perfecta y el mejor césped del mundo.", "stats": [ { "value": "80K", "label": "Capacidad" }, { "value": "120", "label": "Palcos VIP" }, { "value": "100%", "label": "Energía Renovable" } ], "style": "Create a wide dark glass card with the stadium description on the left and green metric numbers centered inside the card. Add generous spacing and a large right-aligned title." }, "players_section": { "title": "Estrellas", "cards": [ { "name": "Leo “Mago” Silva", "position": "Delantero" }, { "name": "Marco Veloz", "position": "Extremo" }, { "name": "S. Muralla", "position": "Portero" } ], "style": "Use three dark player cards with subtle image placeholders, gradient overlays, player name and position. Add hover lift and neon border glow." }, "matches_section": { "title": "Próximos Encuentros", "matches": [ { "date": "24 OCT - 20:00H", "match": "Fútbol 3D vs. Real FC", "competition": "Liga Premier", "button": "Tickets" }, { "date": "28 OCT - 19:30H", "match": "City United vs. Fútbol 3D", "competition": "Copa Internacional", "button": "Info" }, { "date": "02 NOV - 21:00H", "match": "Fútbol 3D vs. Athletico", "competition": "Liga Premier", "button": "Tickets" } ], "style": "Create a clean match schedule with horizontal dark rows, green dates, white match names, gray competition labels and small action buttons." }, "store_section": { "title": "Equípate", "product": { "name": "Camiseta Oficial 24/25", "description": "Tecnología de respiración, ajuste aerodinámico y los colores que defendemos con el alma.", "price": "$89.99 USD", "button": "Comprar Ahora" }, "style": "Right-aligned section with a compact premium product card, dark background, green CTA button and clean merchandise copy." }, "fan_section": { "title": "Únete a la Hinchada", "description": "Foros, eventos exclusivos, entrenamientos privados y más.", "form": { "field": "Tu correo electrónico", "button": "Suscribirse" }, "behavior": "Validate email, show a success message and add visual feedback on submit.", "style": "Centered subscription section with large title, short description and a dark input group with green submit button." }, "price_card": { "position": "Floating bottom-right card on desktop", "text": "Web page", "price": "20 US$", "button": "Comprar", "payment_methods": "Show small accepted payment method icons.", "responsive_behavior": "On mobile, move the price card below the main content instead of floating." }, "footer": { "text": "© 2026 Fútbol 3D. Todos los derechos reservados.", "style": "Minimal dark footer with centered copyright text and subtle spacing." } }, "interactions": [ "Smooth scrolling between sections", "Navbar links scroll to Club, Jugadores, Partidos and Tienda", "Comprar Entradas scrolls to Próximos Encuentros", "Ver Calendario scrolls to the match schedule", "Únete scrolls to the fan subscription section", "Tickets buttons show a simulated purchase confirmation", "Info button opens a small match details modal", "Comprar Ahora opens a simulated merchandise purchase modal", "Suscribirse validates the email field and shows a confirmation message", "Cards lift subtly on hover with 3D depth", "Green buttons have glow hover and active states", "Sections reveal with fade and translateY on scroll", "Floating price card remains visible on desktop" ], "spacing_requirements": [ "Use a centered max-width container around 1200px", "Use very generous vertical spacing between sections", "Keep the layout minimal, spacious and uncluttered", "Use strong empty space to create a premium sports feel", "Use wide gaps between player cards", "Use comfortable padding inside every card", "Keep section titles separated from content", "Do not place text or buttons too close together", "Maintain clear hierarchy with huge headings and small supporting text" ], "responsive_requirements": [ "Desktop layout should feel spacious, premium and dramatic", "Tablet layout should stack content clearly", "Mobile layout should use one-column sections", "Reduce huge titles on mobile while preserving impact", "Keep buttons large and easy to tap", "Make match rows stack cleanly on small screens", "Move the floating price card below the main content on mobile" ], "expected_result": "A complete premium landing page for Fútbol 3D with a dark minimalist football aesthetic, huge bold typography, neon green accents, stadium stats, player cards, match schedule, merchandise section, fan subscription form, floating price card, smooth animations, responsive layout and a modern digital stadium experience." }
Landing Pages
landing page
magzin
Magzin Clone — Editorial magazine home
{ "name": "Magzin Clone 3D", "suggested_route": "magzin-clone", "objective": "Create a premium, modern, editorial, immersive, elegant, functional and responsive landing page for a fictional digital magazine platform called MAGZIN.", "brand_note": "Create an original fictional platform inspired by digital magazines and editorial publications, without copying logos, commercial names, exact visual identities, official texts, proprietary assets or exact designs from any real magazine.", "main_concept": "The website should feel like entering a 3D editorial room where a premium magazine opens in front of the user. As the user scrolls, the camera moves across an editorial desk with floating covers, animated pages, photographs, columns, article cards, archives, newsletter, memberships and editorial contact.", "main_requirements": [ "Create a complete, modern, functional and responsive landing page.", "Include a visible and integrated 3D canvas.", "Add 3D scroll animations.", "Add parallax effects on text, magazine, pages, covers, photographs, cards, authors, categories, buttons, paper, shadows and backgrounds.", "All buttons must work correctly.", "Optimize for desktop, tablet and mobile.", "Use generous margins, clear section separation and strong visual hierarchy.", "Avoid visual clutter.", "Use fictional content for articles, authors, dates, covers, categories, prices and memberships." ], "structure": { "header": { "logo": "MAGZIN", "menu": [ "Home", "Featured", "Articles", "Categories", "Authors", "Archive", "Membership", "Contact" ], "buttons": [ "Subscribe", "Read Latest" ], "description": "Fixed header with translucent glassmorphism background, functional mobile hamburger menu, smooth scrolling and editorial microinteractions." }, "hero": { "title": "A 3D Digital Magazine Experience for Stories That Deserve Space", "subtitle": "Explore featured essays, interviews, culture, design, business, technology and lifestyle through an immersive editorial interface.", "search": { "input": "Search articles, authors or topics", "selector": [ "Culture", "Design", "Business", "Tech", "Travel", "Lifestyle", "Opinion" ], "button": "Search Magazine" }, "buttons": [ "Open the Magazine", "Read Featured Story", "Subscribe Now" ], "visual": "Premium 3D magazine on an editorial desk, floating pages, photographs, headlines, article cards, reading lamp, camera, tablet with digital edition, paper particles and visual depth." }, "canvas_3d": { "description": "Create a premium editorial 3D scene inside a canvas.", "elements": [ "Open 3D magazine", "Main cover", "Animated pages", "Fictional editorial photographs", "Floating article cards", "Editorial desk", "Reading lamp", "Camera", "Editorial pen or pencil", "Tablet with digital edition", "Archive of previous issues", "Newsletter card", "Membership card", "Floating subscription CTA" ], "hotspots": [ "Cover Story", "Featured Article", "Editor’s Pick", "Photography", "Categories", "Archive", "Newsletter", "Subscribe" ] }, "sections": [ { "name": "Magazine Overview", "title": "A Premium Digital Magazine for Modern Readers", "cards": [ "Longform Stories", "Editorial Photography", "Curated Categories", "Member Editions" ] }, { "name": "Featured Story", "article": "The Future of Slow Media in a Fast Digital World", "buttons": [ "Read Story", "Save Story", "Listen Audio Version", "Share" ] }, { "name": "Articles", "articles": [ "Designing Calm Interfaces", "Cities After Midnight", "The Business of Independent Creators", "Why Print Still Inspires Digital Layouts", "A Guide to Better Visual Taste", "Inside a Minimalist Studio", "Technology and Human Attention", "The New Culture of Remote Work", "Travel Notes From Quiet Places", "The Art of Building a Personal Archive" ], "buttons": [ "Open Article", "Save", "Add to Reading List" ] }, { "name": "Reading Mode", "features": [ "Increase Font", "Decrease Font", "Toggle Dark Mode", "Close Reading Mode" ] }, { "name": "Categories", "categories": [ "Culture", "Design", "Technology", "Business", "Travel", "Lifestyle", "Photography", "Opinion", "Interviews", "Essays", "Archives", "Member Edition" ] }, { "name": "Authors", "authors": [ "Mara Linden", "Theo Vale", "Nina Cross", "Elias Ford", "Clara Monet", "Julian Reed", "Sofia Hart", "Atlas Gray" ] }, { "name": "Editor’s Picks", "description": "Show 6 editor-selected articles with a badge, editorial reason, read button and save button." }, { "name": "Visual Essays / Photo Stories", "essays": [ "Light on Concrete", "Portraits of Work", "Quiet Markets", "Objects With Memory", "Architecture of Pause" ] }, { "name": "Archive", "issues": [ "Issue 01: Origins", "Issue 02: Motion", "Issue 03: Cities", "Issue 04: Craft", "Issue 05: Futures", "Issue 06: Quiet Power" ] }, { "name": "Newsletter", "phrase": "One curated issue in your inbox. No noise.", "button": "Subscribe to MAGZIN Weekly" }, { "name": "Membership", "plans": [ "Free Reader", "Weekly Subscriber", "Member Edition", "Patron Circle", "Editorial Partner" ] }, { "name": "Community", "options": [ "Reader comments", "Reading lists", "Member discussions", "Polls", "Topic requests", "Letter to editor", "Saved collections" ] }, { "name": "Partnerships", "options": [ "Sponsored editorial slots", "Brand stories", "Newsletter sponsorship", "Culture reports", "Event partnerships" ] }, { "name": "Testimonials", "testimonials": [ "MAGZIN feels like a calm digital magazine, not another noisy feed.", "The visual essays and reading mode make longform content feel premium.", "The archive helped me discover stories I would have missed." ] }, { "name": "FAQ", "questions": [ "Can I read articles for free?", "Can I subscribe to the newsletter?", "Can I save articles?", "Can I access previous issues?", "Are there member-only editions?", "Can brands request a media kit?", "Is the reading experience mobile-friendly?" ] }, { "name": "Contact", "fields": [ "Name", "Email", "Inquiry Type", "Topic Interest", "Submission Title", "Author Bio", "Membership Interest", "Message" ], "button": "Contact Editorial Team" } ], "footer": { "links": [ "Featured", "Articles", "Categories", "Authors", "Archive", "Newsletter", "Membership", "Partnerships", "Contact", "Terms", "Privacy", "Editorial Policy", "Social Links" ] } }, "required_interactions": [ "The menu must navigate smoothly to each section.", "Open the Magazine must trigger a guided animation in the 3D canvas.", "Read Featured Story must scroll to Featured and open the featured story.", "Subscribe Now must scroll to Membership or Newsletter.", "Search Magazine must filter or show simulated results.", "Canvas hotspots must show information.", "Read Story and Open Article must open reading mode.", "Save and Save Story must change to a saved state.", "Listen Audio Version must activate a simulated audio player.", "Share must show a confirmation.", "Add to Reading List must add the article.", "Increase Font and Decrease Font must change the text size.", "Toggle Dark Mode must switch the reading theme.", "Explore Category must filter articles or focus a canvas area.", "View Author must open an author profile.", "Follow Author must change state.", "View Gallery must open a lightbox.", "Subscribe to MAGZIN Weekly must validate email and show confirmation.", "Choose Membership must select a plan and show a summary.", "FAQ must expand and collapse correctly.", "Contact Editorial Team must validate fields and show confirmation.", "The mobile menu must open and close correctly.", "All buttons must have hover, active state and visual feedback." ], "visual_style": { "description": "Editorial, premium, minimalist, sophisticated, cultural, modern and readable.", "palette": [ "Paper white", "Ink black", "Editorial cream", "Stone gray", "Editorial blue", "Deep red", "Sage green", "Subtle gold", "Graphite gray" ], "assets": [ "Subtle glassmorphism", "Clean cards", "Editorial typography", "3D pages", "Magazine covers", "Photography", "Thin lines", "Grids", "Paper textures", "Soft shadows", "Rounded borders" ] }, "expected_result": "A complete, immersive and functional landing page for Magzin Clone 3D with a 3D canvas, original digital magazine, interactive cover, animated pages, articles, reading mode, categories, authors, editor’s picks, visual essays, archive, newsletter, membership, community, partnerships, testimonials, FAQ, contact, functional form, 3D scroll animations, parallax, hotspots, functional buttons, responsive design, generous margins and a premium editorial publication aesthetic." }
Landing Pages
landing page
magzin
Magzin Studio — Creative editorial system
{ "title": "Premium dark landing page for a 3D football club experience", "description": "Create a premium editorial landing page for Magzin Studio, a creative publishing system for independent magazines. Emphasize bold layouts, modular story cards, portfolio showcases, publishing services and conversion-focused project inquiries.", "main_concept": "The landing page presents a futuristic football club experience where fans can enter the stadium, discover the club, meet the players, check upcoming matches, buy official merchandise and join the fan community. The design should feel elegant, dark, spacious, sporty and digital.", "visual_style": { "theme": "Dark football club website, 3D stadium experience, minimalist sports landing page, digital fan platform", "colors": [ "Deep black", "Charcoal black", "Neon green", "Soft white", "Muted gray", "Dark glass", "Subtle emerald glow" ], "typography": "Huge bold uppercase sans-serif typography, strong sports hierarchy, outlined headline words, compact labels and clean readable body text.", "effects": [ "Dark minimal background", "Neon green accents", "Glassmorphism cards", "Subtle 3D depth", "Soft glow buttons", "Outlined typography", "Hover card lift", "Smooth scroll reveal", "Minimal stadium atmosphere", "Thin dividers and clean spacing" ] }, "structure": { "header": { "logo": "Fútbol 3D", "menu": [ "Club", "Jugadores", "Partidos", "Tienda" ], "button": "Únete", "style": "Minimal fixed dark navbar with the Fútbol 3D logo on the left, small uppercase menu links on the right and a neon green join button. Keep the header clean, compact and aligned." }, "hero": { "headline": "Pisa la Cancha", "description": "La experiencia definitiva del fútbol. Siente la energía, la pasión y la gloria como nunca antes en nuestro estadio interactivo 3D.", "buttons": [ "Comprar Entradas", "Ver Calendario" ], "visual_direction": "Use a dark hero with huge bold white typography and an outlined neon green word. Add a subtle 3D stadium entrance feeling, faint green light, minimal particles and a small vertical scroll indicator that says Scroll para entrar al estadio.", "style": "Large empty space, strong typography, left-aligned hero content and premium minimalist composition." }, "stadium_section": { "title": "Nuestra Casa", "description": "Un estadio de última generación con capacidad para 80,000 almas vibrando al unísono. Iluminación inteligente, acústica perfecta y el mejor césped del mundo.", "stats": [ { "value": "80K", "label": "Capacidad" }, { "value": "120", "label": "Palcos VIP" }, { "value": "100%", "label": "Energía Renovable" } ], "style": "Create a wide dark glass card with the stadium description on the left and green metric numbers centered inside the card. Add generous spacing and a large right-aligned title." }, "players_section": { "title": "Estrellas", "cards": [ { "name": "Leo “Mago” Silva", "position": "Delantero" }, { "name": "Marco Veloz", "position": "Extremo" }, { "name": "S. Muralla", "position": "Portero" } ], "style": "Use three dark player cards with subtle image placeholders, gradient overlays, player name and position. Add hover lift and neon border glow." }, "matches_section": { "title": "Próximos Encuentros", "matches": [ { "date": "24 OCT - 20:00H", "match": "Fútbol 3D vs. Real FC", "competition": "Liga Premier", "button": "Tickets" }, { "date": "28 OCT - 19:30H", "match": "City United vs. Fútbol 3D", "competition": "Copa Internacional", "button": "Info" }, { "date": "02 NOV - 21:00H", "match": "Fútbol 3D vs. Athletico", "competition": "Liga Premier", "button": "Tickets" } ], "style": "Create a clean match schedule with horizontal dark rows, green dates, white match names, gray competition labels and small action buttons." }, "store_section": { "title": "Equípate", "product": { "name": "Camiseta Oficial 24/25", "description": "Tecnología de respiración, ajuste aerodinámico y los colores que defendemos con el alma.", "price": "$89.99 USD", "button": "Comprar Ahora" }, "style": "Right-aligned section with a compact premium product card, dark background, green CTA button and clean merchandise copy." }, "fan_section": { "title": "Únete a la Hinchada", "description": "Foros, eventos exclusivos, entrenamientos privados y más.", "form": { "field": "Tu correo electrónico", "button": "Suscribirse" }, "behavior": "Validate email, show a success message and add visual feedback on submit.", "style": "Centered subscription section with large title, short description and a dark input group with green submit button." }, "price_card": { "position": "Floating bottom-right card on desktop", "text": "Web page", "price": "20 US$", "button": "Comprar", "payment_methods": "Show small accepted payment method icons.", "responsive_behavior": "On mobile, move the price card below the main content instead of floating." }, "footer": { "text": "© 2026 Fútbol 3D. Todos los derechos reservados.", "style": "Minimal dark footer with centered copyright text and subtle spacing." } }, "interactions": [ "Smooth scrolling between sections", "Navbar links scroll to Club, Jugadores, Partidos and Tienda", "Comprar Entradas scrolls to Próximos Encuentros", "Ver Calendario scrolls to the match schedule", "Únete scrolls to the fan subscription section", "Tickets buttons show a simulated purchase confirmation", "Info button opens a small match details modal", "Comprar Ahora opens a simulated merchandise purchase modal", "Suscribirse validates the email field and shows a confirmation message", "Cards lift subtly on hover with 3D depth", "Green buttons have glow hover and active states", "Sections reveal with fade and translateY on scroll", "Floating price card remains visible on desktop" ], "spacing_requirements": [ "Use a centered max-width container around 1200px", "Use very generous vertical spacing between sections", "Keep the layout minimal, spacious and uncluttered", "Use strong empty space to create a premium sports feel", "Use wide gaps between player cards", "Use comfortable padding inside every card", "Keep section titles separated from content", "Do not place text or buttons too close together", "Maintain clear hierarchy with huge headings and small supporting text" ], "responsive_requirements": [ "Desktop layout should feel spacious, premium and dramatic", "Tablet layout should stack content clearly", "Mobile layout should use one-column sections", "Reduce huge titles on mobile while preserving impact", "Keep buttons large and easy to tap", "Make match rows stack cleanly on small screens", "Move the floating price card below the main content on mobile" ], "expected_result": "A complete premium landing page for Fútbol 3D with a dark minimalist football aesthetic, huge bold typography, neon green accents, stadium stats, player cards, match schedule, merchandise section, fan subscription form, floating price card, smooth animations, responsive layout and a modern digital stadium experience." }
Landing Pages
landing page
mega
Mega Estadio — Fan zone and live events
{ "title": "Premium futuristic landing page for NEO-Arena smart stadium", "description": "Create a premium, dark, cinematic and futuristic landing page for a next-generation smart stadium called NEO-Arena. The page must feel like a luxury sports-tech architecture campaign, combining advanced stadium design, holographic systems, immersive sound, adaptive materials, purple neon energy and a high-end editorial layout.", "main_concept": "The landing page presents NEO-Arena as more than a stadium: it is a living architectural frequency where sport, light, sound, data and audience energy merge into one immersive experience. The design should feel premium, spacious, mysterious, technological and cinematic.", "visual_style": { "theme": "Futuristic smart stadium, sports-tech architecture, luxury arena experience, holographic infrastructure, premium editorial landing page", "colors": [ "Deep black", "Dark graphite", "Cold white", "Electric purple", "Neon violet", "Soft cyan", "Steel gray", "Dark blue" ], "typography": "Huge bold uppercase sans-serif typography, editorial sports-tech hierarchy, outlined italic accent words, small technical labels and minimal supporting text.", "effects": [ "Cinematic dark grain", "Glassmorphism panels", "Purple neon glow", "Architectural grid lines", "Stadium aerial photography", "Soft holographic light", "Parallax depth", "Large empty space", "Thin technical dividers", "Futuristic HUD details", "Subtle smoke and particles" ] }, "structure": { "header": { "logo": "NA.26", "menu": [ "Experience", "Architecture", "Access" ], "right_status": "Active System", "style": "Minimal fixed dark navbar with small uppercase links, a geometric logo mark, thin spacing, subtle cyan status indicator and transparent overlay on top of the hero." }, "hero": { "eyebrow": "25.10.26 / Opening Sequence", "headline_left": "NEO-Arena", "headline_right": "The Evolution of Sport", "subtitle": "The 60,000-seat dome. A next-generation structure where every match becomes a holographic ritual, converting every attendee into active energy.", "stats": [ { "value": "218,000 m²", "label": "Total Surface" }, { "value": "+8 ms", "label": "Visual Latency" } ], "visual": "Full-width cinematic aerial view of a futuristic stadium at night, with a metallic geometric roof, glowing interior, dark city background, subtle fog, purple accents and architectural depth.", "buttons": [ "Explore Structure", "Request Access" ] }, "frequency_section": { "section_label": "02 / Beyond the Spectacle", "title": "It is not a stadium. It is a frequency.", "description": "NEO-Arena synchronizes space, light and sound into one reactive architecture. The audience stops observing the event and becomes part of it.", "style": "Use a huge centered headline with the final word in outlined purple italic typography. Keep large empty space around the text and a dark premium background." }, "architecture_section": { "image_caption": "Interior of NEO-Arena with a holographic energy core over the field", "title": "Matter that breathes.", "description": "The outer skin combines kinetic steel, smart crystal and 42 kilometers of luminous fiber. Inside, a matrix of volumetric projectors draws information in the air.", "features": [ "Adaptive kinetic roof", "360-degree spatial sound", "Real-time digital twin" ], "style": "Create a split layout with a large dark image placeholder or cinematic arena visual on the left and a technical text panel on the right. Use thin dividers, small purple numbers and clean architecture labels." }, "cta_section": { "section_label": "04 / First Opening", "title": "Enter the next level.", "button": "Reserve Priority Access", "visual": "Large glowing purple sphere or light source behind the CTA area, with dark cinematic spacing and minimal copy." }, "price_card": { "position": "Floating bottom-right card on desktop", "text": "Web page", "price": "20 US$", "button": "Buy", "payment_methods": "Show small accepted payment method icons.", "responsive_behavior": "On mobile, place the price card below the main content instead of floating." }, "footer": { "content": "Minimal dark footer with NEO-Arena branding, copyright, technical links and subtle purple accents." } }, "interactions": [ "Smooth scrolling between sections", "Navbar links scroll to Experience, Architecture and Access", "Explore Structure scrolls to the architecture section", "Request Access scrolls to the final CTA section", "Reserve Priority Access opens a simulated access request modal", "Hero stadium image moves with slow parallax", "Purple lights pulse subtly in the background", "Large headlines reveal with fade, translateY and slight scale", "Outlined accent words animate with a stroke effect", "Architecture feature rows reveal one by one on scroll", "CTA purple sphere moves slowly with parallax", "Buttons have hover, active and focus states", "Floating price card remains visible on desktop" ], "spacing_requirements": [ "Use a full-width cinematic hero", "Use very large vertical spacing between sections", "Keep the layout premium, architectural and uncluttered", "Use strong empty space to create scale and mystery", "Use centered containers with max-width around 1200px", "Use generous padding on desktop", "Keep text blocks separated from visuals", "Use wide gaps between columns and content blocks", "Avoid placing important content too close to the floating price card" ], "responsive_requirements": [ "Desktop layout should feel wide, premium and cinematic", "Tablet layout should stack content clearly", "Mobile layout should use one-column sections", "Reduce oversized headlines on mobile while preserving impact", "Keep buttons large and easy to tap", "Move the floating price card below the main content on small screens" ], "expected_result": "A complete premium landing page for NEO-Arena with a dark futuristic sports-tech architecture aesthetic, cinematic aerial stadium hero, massive editorial typography, purple neon accents, spacious sections, architectural storytelling, interactive CTA, floating price card, responsive layout and smooth premium animations." }
Landing Pages
landing page
messi
Messi
{ "title": "Premium dark 3D tribute landing page for The Number 10", "description": "Create a premium, dark, elegant and cinematic landing page for an unofficial 3D tribute experience called The Number 10. The page must feel like a digital museum dedicated to the legacy, genius, vision and elegance of a legendary football playmaker. Use a black background, gold typography, subtle blue circular geometry, glassmorphism cards, large empty space and a minimalist luxury atmosphere.", "main_concept": "The landing page should present an immersive digital tribute about the iconic number 10 in football. It should feel emotional, respectful and premium, combining legacy storytelling, career milestones, golden achievements, fan subscription and a clear disclaimer that the experience is unofficial and fan-made.", "visual_style": { "theme": "Dark football tribute, unofficial 3D museum, golden legacy, luxury sports editorial, minimalist cinematic landing page", "colors": [ "Deep black", "Soft gold", "Muted gold", "Dark charcoal", "Steel blue", "Cool white", "Subtle gray" ], "typography": "Bold uppercase sans-serif typography for main titles, elegant small uppercase labels, clean readable body text and gold-highlighted numbers.", "effects": [ "Glassmorphism cards", "Soft gold glow", "Blue circular orbit lines", "Minimal 3D depth", "Large negative space", "Subtle parallax", "Dark vignette", "Slow fade-in animations", "Premium museum-style layout", "Soft shadows" ] }, "structure": { "hero": { "headline": "The Number 10", "subtitle": "An unofficial 3D tribute experience", "visual": "A centered floating dark glass panel with gold typography, surrounded by subtle blue circular orbit lines behind it. The background must be almost black with a premium cinematic glow.", "style": "Centered hero, large vertical spacing, minimal text, elegant luxury composition and slow 3D floating effect." }, "intro_section": { "title": "A path paved with perseverance", "description": "Light. A path paved with perseverance, vision, and an undeniable connection to the beautiful game.", "style": "Small glassmorphism card aligned left with subtle border, muted white text and lots of empty space around it." }, "genius_section": { "title": "A footballing genius", "description": "The ball is an extension of thought. Defying physics with dribbles that rewrite the rules of space and time on the pitch.", "stats": [ { "value": "800+", "label": "Goals" }, { "value": "350+", "label": "Assists" } ], "style": "Dark floating card aligned to the right with gold title, short paragraph and two compact stat cards." }, "legacy_section": { "title": "A Legacy Cast in Gold", "description": "Countless collective and individual honors. The ultimate prize achieved on the grandest stage, completing football.", "highlight": "8x Ballon d'Or representations", "style": "Large dark card aligned left with gold heading, subtle border and a centered achievement pill." }, "fan_zone_section": { "title": "Join the Fan Zone", "description": "Subscribe to receive updates on new interactive digital exhibits.", "form": { "field": "Enter your email", "button": "Subscribe" }, "behavior": "Validate email, show a success message and add subtle gold feedback on submit.", "style": "Centered subscription card near the bottom with dark glass background, gold title, email input and gold CTA button." }, "price_card": { "position": "Floating bottom-right card on desktop", "text": "Web page", "price": "20 US$", "button": "Comprar", "payment_methods": "Show small accepted payment method icons.", "responsive_behavior": "On mobile, move the price card below the content instead of floating." }, "disclaimer": { "text": "This is an unofficial fan-made tribute experience and digital museum. It is not affiliated with, endorsed by or sponsored by any player, club, league, brand or federation. All 3D assets, logos and designs are generic fictional representations created solely for tribute purposes.", "style": "Small white text at the bottom with clear readability and legal-friendly spacing." }, "footer": { "content": "Minimal dark footer with small links, copyright and tribute branding." } }, "interactions": [ "Smooth scrolling between sections", "Hero panel floats slowly with subtle 3D movement", "Blue orbit rings rotate very slowly behind the hero card", "Cards reveal on scroll with fade, translateY and slight scale", "Stats animate when entering the viewport", "Achievement pill glows softly on hover", "Subscribe button validates the email and shows confirmation", "Cards lift slightly on hover with 3D depth", "Gold accents glow subtly on hover", "Floating price card remains visible on desktop" ], "spacing_requirements": [ "Use very large vertical spacing between sections", "Keep the page minimal, luxurious and uncluttered", "Use large empty areas to create a museum-like feeling", "Use centered containers with max-width around 1100px", "Keep each card separated with generous margins", "Use comfortable internal padding inside all cards", "Avoid placing content too close to the floating price card", "Maintain strong visual hierarchy with gold titles and subtle supporting text" ], "responsive_requirements": [ "Desktop layout should feel tall, cinematic and spacious", "Tablet layout should stack content clearly", "Mobile layout should use one-column sections", "Reduce large hero typography on mobile while preserving impact", "Keep forms and buttons easy to tap", "Move the floating price card below the content on small screens" ], "expected_result": "A complete premium landing page for The Number 10 with a dark luxury football tribute aesthetic, centered 3D hero, gold typography, blue orbit geometry, spacious glassmorphism cards, legacy and achievement sections, fan subscription form, legal disclaimer, floating price card, responsive layout and smooth cinematic animations." }
Landing Pages
landing page
SaaS
Dark (HTML + Tailwind)
Create a single-page landing page for “Job,” an AI interviewing SaaS for recruiting. Use HTML + Tailwind CSS via CDN (`<script src="https://cdn.tailwindcss.com"></script>`) and Inter font from Google Fonts. Linear/Vercel style dark mode design. **Tailwind configuration** (extends theme in `<script>`): colors `bg: '#0b0c10'`, `card: '#171922'`, `line: '#23262f'`, `muted: '#9aa0ad'`, `primary: '#6c5ce7'`, `primary2: '#a29bfe'`, `accent: '#00d4a3'`. Font sans = Inter. **Sections:** 1. Sticky Navbar with `backdrop-blur` and bottom border — "M" logo in a purple gradient box, Home/Searching/Blog links, rounded white "Log In" button. 2. Hero `grid lg:grid-cols-2 gap-16` with pill "✦ AI Interviewer", H1 `text-6xl font-extrabold tracking-tight` with "hire" in `bg-clip-text` purple→green gradient, two CTAs (primary with gradient + shadow, ghost with border). On the right, dashboard mockup made with divs: header with 3 macOS dots, 4 rows (circular avatar with gradient + progress bar with `bg-gradient-to-r from-primary to-accent` + score), grid of 3 stats below. Radial blobs with `absolute blur-3xl opacity-30`. 3. Trust bar with logos in text (NASA, PORSCHE, NIKE, Nestlé, Deloitte) in `flex justify-around opacity-60`. 4. Centered value section with large title and CTA link. 5. Grid 4 benefits (`grid md:grid-cols-4 gap-5`) — each card `bg-card border border-line rounded-2xl p-7 hover:-translate-y-1`. 6. "How it works" — 5 steps in `grid md:grid-cols-5` on darker background. 7. Industries — `grid grid-cols-4 gap-3.5` with 12 items. 8. Minimalist Footer. All responsive with breakpoints `md:` and `lg:`. Returns a single `index.html`.
Landing Pages
Salesforce
clone
Salesforce Clone — Customer 360
{ "name": "CloudPilot CRM 3D", "suggested_route": "salesforce-clone", "original_brand": "CloudPilot CRM", "objective": "Develop a modern, SaaS, enterprise, immersive and functional landing page for a fictional and original CRM platform focused on sales, customer management, sales pipeline, automation, marketing, support, dashboards, business intelligence, collaboration, integrations, reporting and business growth.", "brand_note": "Create a fictional and original platform inspired by modern CRM and sales management tools, without copying logos, commercial names, exact visual identity, mascots, official text, proprietary assets, exact design, official colors or the specific visual structure of Salesforce or any other real brand. Use an original brand such as “CloudPilot CRM”, “RevenueGrid”, “ClientOrbit”, “SalesNest” or “PipelineCloud”. Keep the conceptual functionality of an enterprise CRM, but use a completely original identity, UI, modules, data, text, iconography, names and examples.", "main_concept": "The website should feel like entering a 3D sales operations center where customers, leads, opportunities, accounts, campaigns, tickets, automations and reports connect visually. As the user scrolls, the camera moves through an enterprise workspace with a 3D pipeline, floating lead cards, connected accounts, customer avatars, revenue dashboards, forecast views, activities, campaigns, support tickets, integrations and a customer relationship map.", "main_requirements": [ "Create a complete, modern, functional and responsive landing page.", "Include a visible 3D canvas integrated into the main experience.", "Add 3D scroll animations.", "Add parallax effects on text, pipeline, customers, leads, accounts, dashboards, campaigns, tickets, automations, integrations, buttons, charts, avatars and backgrounds.", "Create an experience focused on CRM, sales, customers, pipeline, automation, marketing, support, reporting, integrations, simulated AI, teams and conversion.", "All buttons must work correctly.", "Optimize for desktop, tablet and mobile.", "Use smooth, enterprise-style, technological and performant animations.", "Use fictional data for leads, customers, opportunities, companies, campaigns, forecasts, tickets, metrics, plans and integrations.", "Do not promise guaranteed sales increases or automatic results.", "Use responsible language such as “simulated insights”, “example revenue data” and “review recommendations before action”." ], "visual_organization": { "max_width": "1200px or 1280px", "desktop_padding": "96px to 150px", "mobile_padding": "24px to 32px", "gaps": [ "24px", "32px", "48px" ], "backgrounds": [ "cold white", "night blue", "soft cyan", "glassmorphism blocks", "SaaS gradients", "enterprise grids", "connection lines", "subtle dividers" ], "rules": [ "Do not crowd pipelines, dashboards, tables, buttons, forms, pricing or 3D visuals.", "Separate each CRM block with enough visual space.", "Customer cards must clearly show name, company, stage, estimated value, owner, next activity and CTA.", "Opportunity cards must show deal, account, fictional amount, probability, stage, estimated date and CTA.", "Dashboards must be readable, with simple charts, counters, progress bars, clean tables and visual states." ] }, "structure": { "header": { "logo": "CLOUDPILOT CRM", "menu": [ "Home", "Sales", "Marketing", "Service", "Automation", "Analytics", "Pricing", "Contact" ], "featured_button": "Start Free", "secondary_button": "Book Demo", "description": "Fixed header with a light or dark translucent glassmorphism-style background, functional hamburger mobile menu and smooth scrolling to each section.", "microinteractions": [ "Logo with an abstract cloud and softly connected dots.", "Links with animated underline.", "Buttons with elevation, blue/cyan/green glow and visual feedback.", "Mobile menu with a clean transition." ] }, "hero": { "main_title": "A 3D CRM Workspace for Sales, Service and Growth", "subtitle": "Manage leads, pipelines, accounts, campaigns, support tickets and revenue dashboards from one connected customer platform.", "action_bar": { "input": "What do you want to manage?", "selector": "Leads / Deals / Accounts / Campaigns / Support / Reports / Automation", "button": "Generate CRM Workspace" }, "buttons": [ "Enter CloudPilot", "Explore Pipeline", "Book Demo" ], "visible_text": "Example data and simulated insights only.", "background": "A 3D CRM center with a floating pipeline, lead cards, customer avatars, dashboards, revenue charts, automation nodes, campaigns, tickets, integrations, soft particles and visual depth." }, "canvas_3d": { "name": "CRM Operations Experience", "description": "Create a 3D scene inside a canvas that represents a premium sales operations center.", "elements": [ "Central 3D pipeline", "Columns: New Lead, Qualified, Proposal, Negotiation, Closed Won", "Floating lead cards", "Account cards", "Abstract customer avatars", "Revenue dashboard", "Forecast chart", "Campaign board", "Support ticket queue", "Automation nodes", "Integrations as 3D cubes", "Activity timeline", "Customer relationship map", "Floating demo or signup CTA" ], "hotspots": [ "Lead Capture", "Sales Pipeline", "Account View", "Campaign Automation", "Service Tickets", "Revenue Dashboard", "Integrations", "Start Free" ], "main_animation": "The “Enter CloudPilot” button must trigger a visible animation where the camera enters the CRM center, focuses on the pipeline, creates a lead, moves an opportunity between stages, activates an automation, shows a forecast dashboard, opens support and ends in front of the “Start Free” CTA." }, "sections": [ { "name": "Platform Overview", "title": "One Customer Platform for Every Revenue Team", "description": "CloudPilot CRM centralizes customers, leads, opportunities, campaigns, support, automation and reporting to keep teams aligned.", "cards": [ "Sales Pipeline", "Customer 360", "Marketing Automation", "Service Insights" ] }, { "name": "Lead Management", "items": [ "Aster Foods", "Nova Retail", "Luma Health", "Orbit Logistics", "Northline Labs", "Vela Studio", "Forma Finance", "Atlas Media" ], "fields": [ "Company name", "Fictional contact", "Source", "Fictional score", "Interest", "Owner", "Next activity" ], "buttons": [ "Open Lead", "Qualify Lead", "Assign Owner", "Convert to Deal" ] }, { "name": "Sales Pipeline", "stages": [ "New Lead", "Qualified", "Discovery", "Proposal", "Negotiation", "Closed Won", "Closed Lost" ], "fields": [ "Deal name", "Account", "Fictional amount", "Probability", "Estimated date", "Owner", "Status" ], "buttons": [ "Open Deal", "Move Stage", "Update Amount", "Mark Won" ] }, { "name": "Account 360", "elements": [ "Company profile", "Contacts", "Opportunities", "Activities", "Tickets", "Related campaigns", "Notes", "Timeline", "Fictional revenue history", "Fictional health score" ], "buttons": [ "Open Account", "Add Contact", "Log Activity", "Create Opportunity" ] }, { "name": "Activity Timeline", "elements": [ "Email sent", "Call scheduled", "Meeting completed", "Proposal viewed", "Follow-up reminder", "Contract review", "Support request" ], "buttons": [ "Add Activity", "Schedule Follow-Up", "Complete Task", "Filter Timeline" ] }, { "name": "Marketing Automation", "elements": [ "Campaign builder", "Audience segment", "Email sequence", "Landing page placeholder", "Lead scoring", "Campaign performance", "Nurture flow" ], "buttons": [ "Create Campaign", "Preview Sequence", "Launch Simulation", "View Performance" ] }, { "name": "Service Desk", "tickets": [ "Billing question", "Product setup", "Integration issue", "Feature request", "Priority escalation", "Account update" ], "fields": [ "Customer", "Priority", "Status", "Fictional SLA", "Owner", "Channel" ], "buttons": [ "Open Ticket", "Assign Agent", "Resolve Ticket", "Escalate" ] }, { "name": "Automation Builder", "automations": [ "When lead score is high, assign sales owner.", "When deal moves to proposal, create follow-up.", "When ticket is urgent, notify manager.", "When campaign form is submitted, create lead.", "Every Friday, send forecast report.", "When deal closes, create onboarding task." ], "buttons": [ "Enable Automation", "Preview Flow", "Edit Rule" ] }, { "name": "Analytics / Revenue Dashboard", "metrics": [ "Pipeline value", "Closed revenue", "Lead conversion", "Win rate", "Forecast accuracy placeholder", "Fictional campaign ROI", "Ticket resolution time", "Customer health" ], "buttons": [ "Open Analytics", "Add Widget", "Export Report", "Compare Quarter" ] }, { "name": "AI Assistant / Insights", "elements": [ "Deal summary", "Next best action placeholder", "Lead priority", "Support summary", "Forecast note", "Risk alert", "Suggested email draft" ], "buttons": [ "Generate Insight", "Draft Follow-Up", "Summarize Account", "Review Recommendation" ], "note": "AI-style insights are simulated and should be reviewed before action." }, { "name": "Integrations", "items": [ "Email", "Calendar", "Chat", "Cloud Storage", "Forms", "Ecommerce", "Billing", "Data Warehouse", "Support Chat", "Webhooks", "API", "CSV Import" ], "buttons": [ "Explore Integrations", "Connect Demo Integration", "Request Integration" ] }, { "name": "App Builder / Custom Objects", "elements": [ "Custom fields", "Custom objects", "Layout builder", "Workflow rules", "Approval flows", "Permissions", "Record types", "Dashboards" ], "buttons": [ "Create Custom Object", "Add Field", "Preview Layout", "Save Configuration" ] }, { "name": "Collaboration", "features": [ "Team comments", "Deal notes", "Account handoff", "Approval requests", "Sales playbooks", "Shared dashboards", "Internal mentions", "Activity feed" ], "button": "View Collaboration Feature" }, { "name": "Industry Solutions", "industries": [ "SaaS", "Retail", "Healthcare placeholder", "Financial Services placeholder", "Education", "Real Estate", "Manufacturing", "Professional Services" ], "fields": [ "Problem", "Recommended workflow", "Suggested modules", "Expected result" ], "button": "Explore Solution" }, { "name": "Security / Admin", "elements": [ "Role permissions", "Data access controls", "Audit logs", "Private workspaces", "Approval history", "Export controls", "Field-level permissions placeholder", "Admin dashboard" ], "button": "View Admin Controls" }, { "name": "Pricing", "plans": [ "Free CRM", "Sales Starter", "Growth Cloud", "Revenue Pro", "Enterprise Suite" ], "recommended_plan": "Growth Cloud", "fields": [ "Fictional price", "Users", "Leads", "Pipelines", "Automations", "Dashboards", "Marketing", "Service", "Integrations", "Support" ], "buttons": [ "Choose Plan", "Start Trial" ] }, { "name": "Testimonials", "testimonials": [ "CloudPilot helped our team see every customer conversation in one place.", "The visual pipeline made sales meetings faster and more focused.", "Automations removed repetitive updates and kept follow-ups moving." ] }, { "name": "FAQ", "questions": [ "Is this an official Salesforce website?", "Can I manage leads and deals?", "Can I create custom pipelines?", "Can I automate workflows?", "Can I manage support tickets?", "Can I connect integrations?", "Are AI insights guaranteed?", "Is the platform responsive on mobile?" ], "key_answer": "This is an original fictional platform with no affiliation with Salesforce or any other real brand." }, { "name": "Signup / Contact", "fields": [ "Name", "Email", "Company", "Role", "Team Size", "Main CRM Need", "Current Sales Challenge", "Plan Interest", "Message", "Consent Checkbox" ], "checkbox": "I understand this is a fictional CRM platform concept.", "button": "Create CloudPilot Workspace", "extras": [ "CRM newsletter", "Simulated visual demo calendar" ] } ], "footer": { "logo": "CLOUDPILOT CRM", "text": "Original fictional CRM platform concept. Not affiliated with Salesforce or any real CRM brand.", "links": [ "Sales", "Marketing", "Service", "Automation", "Analytics", "Integrations", "App Builder", "Pricing", "Contact", "Terms", "Privacy", "Security", "Social links" ] } }, "required_interactions": [ "The menu must navigate smoothly to each section.", "Enter CloudPilot must activate the guided animation in the 3D canvas.", "Explore Pipeline must go to Sales Pipeline.", "Book Demo must go to Contact or Demo.", "Generate CRM Workspace must create a simulated view based on the selected option.", "Canvas hotspots must display information.", "Open Lead must open details.", "Qualify Lead must change state.", "Assign Owner must change owner.", "Convert to Deal must create an opportunity.", "Open Deal must open details.", "Move Stage must move a card between columns.", "Update Amount must update the amount.", "Mark Won must change state.", "Open Account must open a panel.", "Add Contact must add a contact.", "Log Activity must add an activity.", "Create Opportunity must create a deal.", "Add Activity must add an event.", "Schedule Follow-Up must create a simulated reminder.", "Complete Task must change state.", "Filter Timeline must filter events.", "Create Campaign must create a campaign.", "Preview Sequence must open a flow.", "Launch Simulation must activate a fictional campaign.", "View Performance must open a dashboard.", "Open Ticket must open details.", "Assign Agent must change owner.", "Resolve Ticket must change state.", "Escalate must change priority.", "Enable Automation must change state.", "Preview Flow must show connected nodes.", "Edit Rule must open the visual editor.", "Open Analytics must open a panel.", "Add Widget must add a visual widget.", "Export Report must show confirmation.", "Compare Quarter must show a comparison.", "Generate Insight must create a simulated insight.", "Draft Follow-Up must create a draft.", "Summarize Account must show a summary.", "Review Recommendation must open a panel.", "Explore Integrations must open a map.", "Connect Demo Integration must activate a simulated connection.", "Request Integration must open a short form.", "Create Custom Object must create a simulated object.", "Add Field must add a field.", "Preview Layout must show a preview.", "Save Configuration must change state.", "View Collaboration Feature must open details.", "Explore Solution must open a panel or filter modules.", "View Admin Controls must open a panel.", "Choose Plan must select a plan and show a summary.", "Start Trial must go to Signup or Contact.", "FAQ must expand and collapse correctly.", "Create CloudPilot Workspace must validate fields, checkbox and show confirmation.", "The form must validate fields and show confirmation.", "The mobile menu must open and close correctly.", "Scrolling must activate 3D animations and parallax.", "All buttons must have hover, active state and visual feedback." ], "animations": [ "When scrolling, the camera should move from the CRM center toward lead management, pipeline, Account 360, activity timeline, marketing, service, automation, analytics, integrations, app builder, pricing and signup.", "Lead cards should appear from depth using translateZ, scale and fade.", "The pipeline should slide columns with smooth movement.", "Opportunities should move between stages like physical cards.", "Customer avatars should enter with a subtle micro-bounce.", "Activities should draw as a glowing timeline.", "Automation nodes should connect with progressive lines.", "Campaigns should unfold email sequences as floating cards.", "Support tickets should organize into a queue with visual states.", "Dashboard widgets should assemble as modular blocks.", "Forecast charts should grow progressively.", "Integrations should connect with glowing lines.", "Custom objects should assemble as 3D modules.", "Pricing cards should rise with 3D hover.", "The signup form should appear with a clean transition from depth.", "Backgrounds, grids, distant screens, connection lines, particles, lights and shadows should move more slowly to create depth.", "Add blue, cyan, success green, soft violet, cold white, soft yellow for alerts, soft red for errors, clean shadows, glass reflections, soft particles and a premium CRM SaaS platform feeling." ], "visual_style": { "description": "Enterprise SaaS, modern, clean, premium, technological, professional, friendly and trustworthy.", "inspiration": "CRM platforms, sales dashboards, enterprise workspaces, automation systems, service desks, marketing hubs, customer maps, sales pipelines and revenue operations interfaces, without copying real brands.", "palette": [ "Cold white", "Night blue", "Electric cyan", "Success green", "Soft violet", "Graphite gray", "Subtle silver", "Soft yellow for alerts", "Soft red for errors", "Deep black for contrast" ], "components": [ "light or dark glassmorphism", "clean cards", "floating pipelines", "dashboards", "abstract avatars", "account maps", "connected nodes", "widgets", "soft shadows", "rounded corners", "breathable composition" ], "feeling": "Clarity, growth, trust, connection, automation, sales visibility, collaboration and customer control." }, "expected_result": "A complete, immersive and functional landing page for “Salesforce Clone 3D”, with an original CloudPilot CRM-style identity, 3D canvas, CRM operations center, lead management, sales pipeline, Account 360, activity timeline, marketing automation, service desk, automation builder, analytics, simulated AI-style insights, integrations, app builder, collaboration, industry solutions, security, pricing, testimonials, FAQ, signup, functional form with fictional concept checkbox, 3D scroll animations, parallax, hotspots, functional buttons, responsive design, generous margins, clear component separation and a premium enterprise CRM platform aesthetic." }
Landing Pages
monday.com
clone
Monday.com Clone — Work OS
{ "name": "Monday Clone 3D", "suggested_original_brand": "Flowday 3D", "suggested_route": "monday-clone", "objective": "Develop a modern, immersive, SaaS, colorful, productive and functional premium landing page for a work management platform with projects, tasks, boards, automations, dashboards, calendars, CRM, team tracking, operational workflows, collaboration, reports and templates.", "brand_note": "Create a fictional and original platform inspired by modern work management tools, without copying logos, commercial names, exact visual identity, official text, proprietary assets, exact design, official colors or the specific visual structure of monday.com. Use an original brand such as “Flowday 3D”, “WorkGrid”, “TaskOrbit”, “TeamPulse” or “ProjectNest”. Keep the conceptual functionality of work management and collaborative boards, but use a completely original visual identity, UI, text, boards, templates and examples.", "main_concept": "The website should feel like entering a 3D operations center where teams organize work on living boards. As the user scrolls, the camera moves through a digital workspace with floating boards, status columns, task cards, timelines, calendars, dashboards, automations as connected nodes, collaborative avatars, comments, files, checklists, labels, integrations and reports. Each section should represent a stage of the workflow: planning, assigning, collaborating, visualizing, automating, measuring and scaling. Scrolling must control the camera, visual depth, parallax, card reveals, column movement, automation connections and the transition toward demo or signup.", "main_requirements": [ "Create a complete, modern, functional and responsive landing page.", "Include a visible 3D canvas integrated into the main experience.", "Add 3D scroll animations.", "Add parallax effects on text, boards, columns, tasks, widgets, timelines, dashboards, avatars, comments, automations, integrations, buttons, labels and backgrounds.", "Create an experience focused on project management, collaboration, boards, tasks, automation, reports, templates, teams, CRM, operations and conversion.", "All buttons must work correctly.", "Optimize for desktop, tablet and mobile.", "Use smooth, colorful, productive and performant animations.", "Keep the scene clear, premium, organized, cheerful, professional and easy to navigate.", "Use generous margins, clear separation between sections and strong visual hierarchy.", "Avoid visual clutter: the page should feel powerful, flexible, scannable, friendly and trustworthy.", "Use fictional data for projects, tasks, teams, clients, metrics, dates, templates, prices and integrations.", "Work freely to improve the 3D scene, boards, tasks, dashboards, automations, microinteractions, parallax and conversion flow." ], "visual_organization": { "max_width": "1200px or 1280px", "desktop_padding": "96px to 150px", "mobile_padding": "24px to 32px", "gaps": [ "24px", "32px", "48px" ], "backgrounds": [ "warm white", "night blue", "glassmorphism blocks", "soft gradients", "product grids", "connection lines", "subtle dividers" ], "rules": [ "Do not crowd boards, columns, tasks, charts, buttons, forms, templates or 3D visuals.", "Separate each SaaS block with enough visual space.", "Titles must have space before and after.", "Buttons must have enough margin from text.", "Cards must have generous internal padding.", "Task cards must clearly show title, owner, status, priority, date, label and CTA.", "Template cards must clearly show name, area, use case, included views and CTA.", "Tables and dashboards must be readable, with clean rows, clear columns and visual states.", "The page should feel scannable, SaaS, premium and organized." ] }, "structure": { "header": { "logo": "FLOWDAY 3D", "menu": [ "Home", "Workspaces", "Boards", "Automations", "Dashboards", "Templates", "Pricing", "Contact" ], "featured_button": "Start Free", "secondary_button": "Book Demo", "description": "Fixed header with a light or dark translucent glassmorphism-style background, functional hamburger mobile menu and smooth scrolling to each section.", "microinteractions": [ "Logo with colored dots that connect smoothly.", "Links with animated underline.", "Buttons with elevation, blue/cyan/purple glow and visual feedback.", "Mobile menu with a clean transition." ] }, "hero": { "main_title": "Manage Work in a 3D Collaborative Workspace", "subtitle": "Plan projects, assign tasks, automate workflows, visualize progress and align teams from one flexible work management platform.", "action_bar": { "input": "What would you like to manage?", "selector": "Projects / Marketing / Sales CRM / Product / Operations / HR / Support", "button": "Generate Workspace" }, "buttons": [ "Enter Workspace", "Explore Boards", "Start Free" ], "background": "A 3D workspace with floating boards, columns, tasks, colored labels, timeline, calendar, dashboard widgets, avatars, comments, automations, connection lines, soft particles and visual depth.", "parallax": [ "title", "search bar", "boards", "tasks", "avatars", "dashboards", "buttons", "background" ] }, "canvas_3d": { "name": "Work Management Workspace Experience", "description": "Create a 3D scene inside a canvas that represents a premium work management center.", "elements": [ "Main 3D board", "Columns: To Do, In Progress, Review, Done", "Floating task cards", "Horizontal timeline", "Calendar", "Kanban board", "Dashboard with KPIs", "Progress charts", "Team avatars", "Floating comments", "Attached files", "Priority labels", "Automation nodes", "Integrations as 3D cubes", "Templates as panels", "Floating signup CTA" ], "style": "Colorful lights, clean shadows, glassmorphism and visual depth.", "main_animation": "The “Enter Workspace” button must trigger a visible animation where the camera enters the workspace, focuses on the board, moves a task between columns, assigns an owner, activates an automation, displays a dashboard, connects integrations and ends in front of the “Start Free” CTA.", "hotspots": [ "Project Board", "Task Card", "Timeline View", "Automation Flow", "Dashboard Widgets", "Team Comments", "Integrations", "Start Free" ] }, "scroll_3d_storytelling": { "chapters": [ "Workspace entrance", "Main board", "Tasks and statuses", "Work views", "Collaboration", "Automations", "Dashboards", "Templates", "Integrations", "Pricing and signup" ], "transforms": [ "translateZ for depth", "scale to highlight boards, tasks, timelines, dashboards, automations and CTAs", "smooth rotation for cards, badges, nodes, integration cubes and widgets", "fade for clean transitions", "subtle blur for distant panels", "fly-through camera movement through a SaaS product", "split animation to separate planning, execution, automation, reporting and scaling" ], "parallax_layers": { "front": [ "titles", "buttons", "CTAs", "filters", "prices", "names", "states", "cards" ], "middle": [ "boards", "tasks", "columns", "dashboards", "timelines", "avatars", "hotspots", "automations" ], "background": [ "workspace", "grids", "lights", "connection lines", "particles", "distant screens", "shadows" ] } }, "sections": [ { "name": "Platform Overview", "title": "One Flexible Workspace for Every Team", "description": "Flowday lets teams create boards, organize tasks, automate processes, measure progress and keep everyone aligned from one place.", "cards": [ "Plan Work", "Track Progress", "Automate Routine", "Report Clearly" ] }, { "name": "Workspaces", "items": [ "Marketing Campaigns", "Product Roadmap", "Sales CRM", "Client Projects", "HR Onboarding", "Operations Tracker", "Support Queue", "Finance Requests" ], "fields": [ "Description", "Ideal team", "Included views", "Main metrics" ], "buttons": [ "Open Workspace", "Use Template" ] }, { "name": "Boards", "items": [ "Project board", "Kanban board", "Timeline board", "Calendar board", "CRM pipeline", "Sprint board", "Content calendar", "Request tracker" ], "fields": [ "Name", "Use case", "Columns", "Status" ], "buttons": [ "Preview Board", "Create Board", "Customize Board" ] }, { "name": "Task Management", "tasks": [ "Design homepage wireframe", "Review campaign brief", "Prepare client proposal", "Launch product sprint", "Update CRM pipeline", "Approve content calendar", "Resolve support backlog", "Finalize Q3 roadmap" ], "fields": [ "Owner", "Status", "Priority", "Due date", "Labels", "Comments" ], "buttons": [ "Open Task", "Assign User", "Move Status" ] }, { "name": "Task Detail Modal", "elements": [ "Title", "Description", "Owner", "Date", "Status", "Priority", "Checklist", "Comments", "File placeholders", "Subtasks", "History" ], "buttons": [ "Add Comment", "Complete Task", "Add Subtask" ] }, { "name": "Views", "views": [ "Table View", "Kanban View", "Timeline View", "Calendar View", "Gantt View", "Dashboard View", "Workload View", "Form View" ], "fields": [ "Description", "Best use", "Visual placeholder" ], "button": "Switch View" }, { "name": "Automations", "automations": [ "When status changes to Done, notify team.", "When due date arrives, send reminder.", "When form is submitted, create task.", "When priority is High, assign manager.", "Every Monday, generate report.", "When deal closes, create onboarding project." ], "fields": [ "Trigger", "Action", "Status" ], "buttons": [ "Enable Automation", "Preview Flow", "Edit Rule" ] }, { "name": "Dashboards", "metrics": [ "Tasks completed", "On-time delivery", "Workload by person", "Project health", "Open blockers", "Budget placeholder", "Campaign performance", "Team velocity" ], "buttons": [ "Open Dashboard", "Add Widget", "Export Report" ] }, { "name": "Collaboration", "features": [ "Team comments", "Mentions", "File sharing", "Approval workflows", "Guest access", "Activity history", "Team updates", "Project notes" ], "button": "View Collaboration Feature" }, { "name": "Templates", "templates": [ "Marketing Plan", "Product Roadmap", "Sales Pipeline", "Recruitment Tracker", "Client Onboarding", "Event Planning", "Bug Tracking", "Content Calendar", "OKR Dashboard", "Project Portfolio" ], "fields": [ "Category", "Included views", "Ideal for", "Fictional setup time" ], "buttons": [ "Preview Template", "Use Template" ] }, { "name": "Integrations", "integrations": [ "Calendar", "Email", "Chat", "Cloud Storage", "CRM", "Forms", "Git Repository", "Analytics", "Webhooks", "API", "CSV Import", "Automation Bot" ], "buttons": [ "Explore Integrations", "Request Integration" ] }, { "name": "Use Cases", "use_cases": [ "Project Management", "Marketing Operations", "Sales CRM", "Product Development", "HR Workflows", "Agency Client Work", "IT Requests", "Executive Reporting", "Startup Operations", "Enterprise Portfolio" ], "fields": [ "Problem", "Recommended workflow", "Suggested views", "Expected result" ], "button": "Explore Use Case" }, { "name": "Security / Admin", "elements": [ "Role permissions", "Guest access controls", "Audit logs", "Workspace ownership", "Data export controls", "Approval history", "Private boards", "Admin dashboard" ], "button": "View Admin Controls" }, { "name": "Pricing", "plans": [ "Free", "Basic Team", "Pro Workspace", "Business Operations", "Enterprise Grid" ], "recommended_plan": "Pro Workspace", "fields": [ "Fictional price", "Users", "Boards", "Automations", "Dashboards", "Integrations", "Storage", "Support" ], "buttons": [ "Choose Plan", "Start Trial" ] }, { "name": "Testimonials", "testimonials": [ "Flowday helped our team move from scattered tasks to one clear workspace.", "The automations removed repetitive updates and kept projects moving.", "The dashboards made progress visible for leadership and teams." ] }, { "name": "FAQ", "questions": [ "Can I create custom boards?", "Can I switch between views?", "Can I automate workflows?", "Can teams collaborate in real time?", "Can I use templates?", "Can I connect integrations?", "Is the platform responsive on mobile?" ] }, { "name": "Signup / Contact", "fields": [ "Name", "Email", "Company", "Team Size", "Main Use Case", "Current Workflow Challenge", "Plan Interest", "Message" ], "button": "Create Flowday Workspace", "extras": [ "Newsletter option", "Simulated visual demo calendar" ] } ], "footer": { "logo": "FLOWDAY 3D", "links": [ "Workspaces", "Boards", "Views", "Automations", "Dashboards", "Templates", "Integrations", "Pricing", "Contact", "Terms", "Privacy", "Security", "Social links" ] } }, "required_interactions": [ "The menu must navigate smoothly to each section.", "Enter Workspace must activate the guided animation in the 3D canvas.", "Explore Boards must go to Boards.", "Start Free must go to Pricing or Signup.", "Generate Workspace must create a simulated view based on the selected option.", "Canvas hotspots must display information.", "Open Workspace must open a simulated view.", "Use Template must select a template and show confirmation.", "Preview Board must open a preview.", "Create Board must create a simulated board.", "Customize Board must open a columns panel.", "Open Task must open details.", "Assign User must change the owner.", "Move Status must move a task between columns.", "Add Comment must add a simulated comment.", "Complete Task must change the status to Done.", "Add Subtask must create a subtask.", "Switch View must change the board’s visual layout.", "Enable Automation must change state.", "Preview Flow must show connected nodes.", "Edit Rule must open the visual editor.", "Open Dashboard must open a panel.", "Add Widget must add a visual widget.", "Export Report must show confirmation.", "View Collaboration Feature must open details.", "Preview Template must open a preview.", "Explore Integrations must open a map.", "Request Integration must open a short form.", "Explore Use Case must open a panel or filter templates.", "View Admin Controls must open a panel.", "Choose Plan must select a plan and show a summary.", "Start Trial must go to Signup or Contact.", "FAQ must expand and collapse correctly.", "Create Flowday Workspace must validate fields and show confirmation.", "The form must validate fields and show confirmation.", "The mobile menu must open and close correctly.", "Scrolling must activate 3D animations and parallax.", "All buttons must have hover, active state and visual feedback." ], "animations": [ "When scrolling, the camera should move from the workspace toward boards, tasks, views, automations, dashboards, collaboration, templates, integrations, pricing and signup.", "Task cards should appear from depth using translateZ, scale and fade.", "Board columns should slide with smooth movement.", "Tasks should move between statuses like physical cards.", "Avatars should enter with a subtle micro-bounce.", "Comments should appear as floating bubbles.", "Table, Kanban, Timeline, Calendar and Dashboard views should smoothly transform between each other.", "Automation lines should draw progressively between nodes.", "Dashboard widgets should assemble as modular blocks.", "Integrations should connect with glowing lines.", "Templates should appear as reusable panels.", "Pricing cards should rise with 3D hover.", "The signup form should appear with a clean transition from depth.", "Backgrounds, grids, distant screens, connection lines, particles, lights and shadows should move more slowly to create depth.", "Add blue, cyan, purple, success green, soft yellow, soft pink and cold white glow, clean shadows, glass reflections, soft particles and a premium SaaS workspace feeling.", "Avoid abrupt, fast or chaotic movements." ], "visual_style": { "description": "Modern SaaS, productive, colorful, friendly, premium, technological and clear.", "inspiration": "Work management platforms, project dashboards, Kanban boards, product operating systems, visual CRMs, collaboration tools, workflow automation, productivity templates and executive dashboards, without copying real brands.", "palette": [ "Warm white", "Night blue", "Electric cyan", "Soft purple", "Success green", "Energy yellow", "Coral pink", "Graphite gray", "Deep black for contrast" ], "components": [ "light or dark glassmorphism", "clean cards", "floating boards", "columns", "widgets", "avatars", "labels", "badges", "connection lines", "soft shadows", "rounded corners", "breathable composition" ], "feeling": "Clarity, collaboration, control, flexibility, automation, visible progress, speed and organization." }, "expected_result": "A complete, immersive and functional landing page for “Monday Clone 3D”, with an original Flowday 3D-style identity, 3D canvas, interactive workspace, boards, tasks, columns, views, automations, dashboards, collaboration, templates, integrations, use cases, security, pricing, testimonials, FAQ, signup, functional form, 3D scroll animations, parallax, hotspots, functional buttons, responsive design, generous margins, clear component separation and a premium SaaS work management platform aesthetic." }
Landing Pages
Trello
clone
Trello Clone — Kanban Boards
{ "name": "BoardFlow 3D", "suggested_route": "trello-clone", "objective": "Develop a modern, SaaS, productive, immersive and functional premium landing page for a fictional and original visual project management platform with Kanban boards, tasks, lists, cards, automations, calendars, timelines, team collaboration, templates, workflows, dashboards, integrations, permissions, reports and progress tracking.", "brand_note": "Create a fictional and original platform inspired by modern visual organization and project management tools, without copying logos, commercial names, exact visual identity, official text, proprietary assets, official colors, specific visual structures, illustrations, icons or the exact design of Trello, Atlassian or any other real brand. Use an original brand such as “BoardFlow”, “TaskNest”, “FlowCards”, “ProjectOrbit” or “KanbanCloud”. Keep the conceptual functionality of boards, lists, cards, tasks, teams and automation, but use a completely original visual identity, UI, data, text, iconography and examples.", "main_concept": "The website should feel like entering a 3D workspace where projects float as living boards. As the user scrolls, the camera moves through a giant Kanban board with columns, cards, labels, checklists, comments, files, members, dates, automations, calendar, timeline and dashboard. Each section should represent a stage of the workflow: organizing ideas, creating tasks, prioritizing, assigning owners, moving cards, automating processes, reviewing progress and converting visitors into registered users.", "main_requirements": [ "Create a complete, modern, functional and responsive landing page.", "Include a visible 3D canvas integrated into the main experience.", "Add 3D scroll animations.", "Add parallax effects on text, boards, columns, cards, labels, checklists, avatars, calendars, timelines, dashboards, buttons and backgrounds.", "Create an experience focused on visual management, Kanban boards, tasks, teams, collaboration, automations, templates, views, reports, integrations, pricing and conversion.", "All buttons must work correctly.", "Optimize for desktop, tablet and mobile.", "Use smooth, productive, clear and performant animations.", "Keep the scene clear, premium, trustworthy, organized and easy to navigate.", "Use generous margins, clear separation between sections and strong visual hierarchy.", "Avoid visual clutter: the page should feel clean, scannable, productive, modern and professional.", "Use fictional data for boards, tasks, projects, members, dates, comments, files, automations, integrations, metrics and plans.", "Do not promise guaranteed productivity, real integrations or automatic results.", "Include messages such as “demo workflow data”, “fictional project examples” and “automation behavior is simulated”." ], "visual_organization": { "max_width": "1200px or 1280px", "desktop_padding": "96px to 150px", "mobile_padding": "24px to 32px", "gaps": [ "24px", "32px", "48px" ], "backgrounds": [ "deep blue", "clean white", "cloud gray", "soft cyan", "work violet", "success green", "glassmorphism blocks", "productivity grids", "flow lines", "subtle dividers" ], "rules": [ "Do not crowd cards, columns, buttons, forms, pricing, dashboards or 3D visuals.", "Separate each productivity block with enough visual space.", "Task cards must clearly show title, status, priority, owner, date, checklist, labels, comments and CTA.", "Template cards must show name, ideal use, included columns, difficulty, recommended team and CTA.", "Dashboards must be readable, with KPIs, progress bars, clean tables, simple charts and visual states." ] }, "structure": { "header": { "logo": "BOARDFLOW", "menu": [ "Home", "Boards", "Templates", "Automation", "Views", "Teams", "Pricing", "Contact" ], "featured_button": "Start Free", "secondary_button": "View Demo Board", "description": "Fixed header with a light or dark translucent glassmorphism-style background, functional hamburger mobile menu and smooth scrolling to each section.", "microinteractions": [ "Logo with three abstract cards that smoothly align.", "Links with animated underline.", "Buttons with elevation, blue/cyan/violet glow and visual feedback.", "Mobile menu with a clean transition." ] }, "hero": { "main_title": "Organize Every Project in a 3D Visual Workspace", "subtitle": "Plan, track and collaborate with boards, lists, cards, automations and team workflows in one clear project hub.", "action_bar": { "input": "What project do you want to organize?", "selector": "Marketing / Product / Design / Engineering / Operations / Sales / Content / Personal / Startup / Education", "button": "Create Demo Board" }, "buttons": [ "Enter BoardFlow", "Explore Boards", "Start Free" ], "background": "A 3D Kanban board with floating columns, movable cards, labels, checklists, avatars, dates, comments, automations, calendar, timeline, dashboard and visual depth.", "visible_text": "Demo workflow with fictional project data." }, "canvas_3d": { "name": "Visual Workspace Experience", "description": "Create a 3D scene inside a canvas that represents a premium visual workspace.", "elements": [ "Central 3D Kanban board", "Columns: Backlog, To Do, In Progress, Review, Done", "Floating cards", "Priority labels", "Checklists", "Team avatars", "Comments", "Attachment placeholders", "Due date", "Visual automation", "Calendar", "Timeline", "Progress dashboard", "Templates", "Floating signup CTA" ], "lighting": "Blue/cyan/violet lights, clean shadows, glassmorphism and visual depth.", "main_animation": "The “Enter BoardFlow” button must trigger a visible animation where the camera enters the board, creates a card, assigns it to a member, adds a checklist, moves the card from To Do to In Progress, activates an automation, updates the dashboard and ends in front of the “Start Free” CTA.", "hotspots": [ "Kanban Board", "Task Card", "Team Members", "Checklist", "Automation", "Calendar View", "Progress Dashboard", "Start Free" ] }, "scroll_3d_storytelling": { "chapters": [ "Workspace entrance", "Main board", "Cards and checklists", "Teams and comments", "Templates", "Automations", "Calendar/timeline views", "Dashboard", "Pricing", "Final signup" ], "transforms": [ "translateZ for depth", "scale to highlight boards, cards, columns, avatars, views, dashboards and CTAs", "smooth rotation for cards, labels, badges, widgets, calendars and templates", "fade for clean transitions", "subtle blur for distant boards and columns", "camera walkthrough through a productive workspace", "split animation to separate planning, tasks, collaboration, automation, views and reporting" ], "parallax_layers": { "front": [ "titles", "buttons", "CTAs", "filters", "prices", "forms", "cards" ], "middle": [ "board", "columns", "cards", "avatars", "checklists", "hotspots", "calendar", "dashboard" ], "background": [ "grids", "panels", "distant workspaces", "flow lines", "particles", "shadows" ] } }, "sections": [ { "name": "Platform Overview", "title": "Turn Work Into Visual Flow", "description": "BoardFlow helps teams and individuals organize projects in visual boards, move tasks, collaborate, automate repetitive actions and review progress without losing clarity.", "cards": [ "Visual Boards", "Smart Task Cards", "Team Collaboration", "Workflow Automation" ] }, { "name": "Boards", "boards": [ "Product Launch", "Marketing Calendar", "Design Sprint", "Engineering Roadmap", "Content Pipeline", "Sales Follow-Up", "Hiring Process", "Personal Goals" ], "fields": [ "Team", "Fictional number of cards", "Status", "Progress", "Last activity" ], "buttons": [ "Open Board", "Duplicate Board", "Save Template" ] }, { "name": "Kanban Board Demo", "columns": [ "Backlog", "To Do", "In Progress", "Review", "Done" ], "fictional_cards": [ "Write launch brief", "Design homepage hero", "Review mobile layout", "Connect analytics", "Prepare email sequence", "Test checkout flow", "Publish release notes", "Collect feedback" ], "buttons": [ "Create Card", "Move Card", "Assign Member", "Add Label", "Archive Done" ] }, { "name": "Card Detail", "elements": [ "Title", "Description", "Status", "Owner", "Labels", "Checklist", "Due date", "Attachment placeholder", "Comments", "Activity log" ], "buttons": [ "Edit Card", "Add Checklist Item", "Add Comment", "Complete Card" ] }, { "name": "Templates", "templates": [ "Product Roadmap", "Sprint Planning", "Content Calendar", "Event Planning", "CRM Pipeline", "Hiring Tracker", "Bug Tracking", "Personal Planner", "Course Planner", "Client Project" ], "fields": [ "Ideal use", "Included columns", "Level", "Recommended team" ], "buttons": [ "Preview Template", "Use Template", "Customize" ] }, { "name": "Automation", "rules": [ "When card moves to Done, notify team.", "When due date is near, add urgent label.", "When checklist completes, move to Review.", "Every Monday, create planning card.", "When label is blocked, alert owner." ], "buttons": [ "Create Automation", "Run Automation", "Edit Rule", "Disable Rule" ] }, { "name": "Views", "views": [ "Board View", "Calendar View", "Timeline View", "Table View", "Dashboard View", "Workload View" ], "buttons": [ "Switch to Calendar", "Switch to Timeline", "Switch to Table", "Open Dashboard" ] }, { "name": "Calendar / Timeline", "elements": [ "Deadlines", "Scheduled cards", "Milestones", "Sprints", "Dependency placeholder", "Delivery status" ], "buttons": [ "Add Due Date", "Create Milestone", "Shift Timeline", "Highlight Overdue" ] }, { "name": "Team Collaboration", "elements": [ "Members", "Roles", "Comments", "Mentions", "Activity feed", "Shared boards", "Permissions", "Notifications" ], "buttons": [ "Invite Member", "Mention Teammate", "Change Role", "Open Activity" ] }, { "name": "Dashboard / Reports", "metrics": [ "Tasks completed", "Cards by status", "Overdue tasks", "Team workload", "Cycle time placeholder", "Weekly progress", "Automation runs", "Template usage" ], "buttons": [ "Open Reports", "Compare Boards", "Export Report", "Add Widget" ] }, { "name": "Integrations", "integrations": [ "Calendar", "Email", "Chat", "Cloud Drive", "Docs", "Design Tool", "Code Repository", "CRM", "Forms", "Webhooks", "API" ], "buttons": [ "Explore Integrations", "Connect Demo Integration", "Request Integration" ] }, { "name": "Use Cases", "use_cases": [ "Product teams", "Marketing teams", "Design studios", "Engineering squads", "Sales teams", "Operations", "Education", "Personal planning" ], "fields": [ "Problem", "Recommended workflow", "Suggested template", "Expected result" ], "button": "Explore Use Case" }, { "name": "Security / Admin", "elements": [ "Workspace roles", "Board permissions", "Private boards", "Activity logs", "Export controls", "Guest access", "SSO placeholder", "Data retention placeholder" ], "button": "View Admin Controls", "message": "Security settings are simulated examples and should be configured for your organization." }, { "name": "Pricing", "plans": [ "Free Planner", "Team Flow", "Project Pro", "Business Workspace", "Enterprise Control" ], "recommended_plan": "Project Pro", "fields": [ "Fictional price", "Boards", "Cards", "Templates", "Automations", "Views", "Dashboards", "Integrations", "Permissions", "Support" ], "buttons": [ "Choose Plan", "Start Free" ] }, { "name": "Testimonials", "testimonials": [ "BoardFlow made our project chaos feel visual, calm and easy to move forward.", "The 3D board demo helped our team understand the workflow instantly.", "Templates and automation made planning feel faster without losing clarity." ] }, { "name": "FAQ", "questions": [ "Is this an official Trello website?", "Can I create boards and cards?", "Can I move cards between lists?", "Can I invite team members?", "Can I use automations?", "Are project examples and metrics real?", "Is the experience responsive on mobile?" ], "note": "Include a clear answer stating that this is an original fictional platform with no affiliation with Trello, Atlassian or any other real brand." }, { "name": "Signup / Contact", "fields": [ "Name", "Email", "Company", "Team Size", "Main Workflow", "Preferred Template", "Plan Interest", "Message", "Consent Checkbox" ], "button": "Create BoardFlow Workspace", "checkbox": "I understand this is a fictional project management platform concept with simulated boards, tasks and workflow data.", "extras": [ "Productivity newsletter option", "Sample project board template download" ] } ], "footer": { "text": "Original fictional project management platform concept. Not affiliated with Trello, Atlassian or any real productivity brand.", "links": [ "Boards", "Cards", "Templates", "Automation", "Calendar", "Timeline", "Dashboard", "Integrations", "Security", "Pricing", "Contact", "Terms", "Privacy", "Demo Data Note", "Social links" ] } }, "required_interactions": [ "The menu must navigate smoothly to each section.", "Enter BoardFlow must activate the guided animation in the 3D canvas.", "Explore Boards must scroll to Boards.", "Start Free must scroll to Pricing or Signup.", "Create Demo Board must create a simulated board based on the selected workflow.", "Canvas hotspots must display information.", "Open Board must open the board view.", "Duplicate Board must create a simulated copy.", "Save Template must change state.", "Create Card must add a card.", "Move Card must move a card between columns.", "Assign Member must add an avatar.", "Add Label must add a label.", "Archive Done must clear or confirm.", "Edit Card must open editing.", "Add Checklist Item must add an item.", "Add Comment must add a comment.", "Complete Card must move the card to Done.", "Preview Template must open a preview.", "Use Template must create a simulated board.", "Customize must open settings.", "Create Automation must create a rule.", "Run Automation must animate the action.", "Edit Rule must open a panel.", "Disable Rule must change state.", "Switch to Calendar must change the view.", "Switch to Timeline must change the view.", "Switch to Table must change the view.", "Open Dashboard must open the dashboard.", "Add Due Date must add a date.", "Create Milestone must create a milestone.", "Shift Timeline must move dates.", "Highlight Overdue must highlight overdue tasks.", "Invite Member must open a short form.", "Mention Teammate must add a comment.", "Change Role must change the permission.", "Open Activity must open the feed.", "Open Reports must open a panel.", "Compare Boards must show a comparison.", "Export Report must show confirmation.", "Add Widget must add a widget.", "Explore Integrations must open a map.", "Connect Demo Integration must activate a simulated connection.", "Request Integration must open a short form.", "Explore Use Case must open a panel or filter templates.", "View Admin Controls must open a panel.", "Choose Plan must select a plan and show a summary.", "Start Free must go to Signup.", "FAQ must expand and collapse correctly.", "Create BoardFlow Workspace must validate fields, checkbox and show confirmation.", "The form must validate fields and show confirmation.", "The mobile menu must open and close correctly.", "Scrolling must activate 3D animations and parallax.", "All buttons must have hover, active state and visual feedback." ], "animations": [ "When scrolling, the camera should move from the workspace toward the board, boards, Kanban demo, card detail, templates, automation, views, calendar, collaboration, dashboard, integrations, use cases, pricing and signup.", "Board columns should appear from depth using translateZ, scale and fade.", "Cards should slide between columns with smooth movement and shadow.", "Labels should enter with subtle rotation and controlled glow.", "Team avatars should float near assigned cards.", "Checklists should complete with microanimations.", "Automations should draw glowing lines between trigger and action.", "Calendar, timeline and table views should reorganize the same content into 3D panels.", "Dashboards should assemble with widgets and progressive metrics.", "Integrations should connect as nodes with animated lines.", "Pricing cards should rise with 3D hover.", "The form should appear with a clean transition from depth.", "Backgrounds, grids, distant panels, workspaces, particles, flow lines and shadows should move more slowly to create depth.", "Avoid abrupt, fast, chaotic movements or anything that makes tasks and states hard to read." ], "visual_style": { "description": "Premium SaaS, visual productivity, modern, clean, collaborative, flexible and professional.", "inspiration": "Kanban boards, project management tools, visual workflows, dashboards, calendars, timelines, templates, automations, remote work and team collaboration, without copying real brands.", "palette": [ "Deep blue", "Electric cyan", "Clean white", "Cloud gray", "Work violet", "Success green", "Priority yellow", "Soft orange for alerts", "Soft red for errors", "Graphite black" ], "components": [ "glassmorphism", "clean cards", "3D boards", "floating columns", "cards", "labels", "avatars", "checklists", "calendars", "timelines", "dashboards", "integration nodes", "soft shadows", "rounded corners", "breathable composition" ], "feeling": "Clarity, control, collaboration, movement, progress, organization, focus and execution." }, "expected_result": "A complete, immersive and functional landing page for “Trello Clone 3D”, with an original BoardFlow-style identity, 3D canvas, visual workspace, Kanban board, boards, cards, checklists, templates, automation, calendar, timeline, collaboration, dashboard, integrations, use cases, admin controls, pricing, testimonials, FAQ, signup, functional form with a fictional concept checkbox, 3D scroll animations, parallax, hotspots, functional buttons, responsive design, generous margins, clear component separation and a premium original project management platform aesthetic." }
Landing Pages
Airtable
clone
Airtable Clone — Flexible Database
Create a premium web landing page called “Airtable Clone 3D”. Objective: Desarrollar a landing page modern, immersive, tecnológica and functional for presentar a plataforma tipo base of data visual, spreadsheet inteligente, gestor of projects, CRM flexible, workspace colaborativo, automatizador of procesos and dashboard operativo. The page must show cómo the usuarios pueden organizar data, create tablas, vistas Kanban, calendarios, formularios, automatizaciones, dashboards, integraciones, permisos, plantillas and workflows. Must include canvas 3D, animations of scroll 3D, parallax effects, tablas 3D, cards flotantes, vistas interactives, filtros, formularios, pricing, CTA, form functional and buttons totalmente operativos. Main concept: The websitesite should feel as entrar a a workspace of data in 3D. As the user scrolls, the camera must recorrer a univiewso visual of bases, tablas, registros, columnas, filas, cards Kanban, calendarios, formularios, dashboards, integraciones, nodos of automatización and paneles colaborativos. Each section must explicar cómo a empresa can transform data dispersos in a sistema clear, visual and automatizado. Scrolling must control the camera, the depth visual, the aparición of tablas, the cambio between vistas, the dibujo of workflows, the activación of automatizaciones and the transición hacia conviewsión. Main requirements: Create a landing page complete, modern, functional and responsive. Name or ruta sugerida: “airtable-clone”. Include a visible 3D canvas e integrado in the experience main. Add 3D scroll animations. Add parallax effects in texts, tablas, celdas, registros, columnas, cards Kanban, calendarios, dashboards, nodos, formularios, buttons, iconos, líneas of data and backgrounds. Create a experience enfocada in bases of data visuales, organización, colaboración, automatización, dashboards, plantillas, integraciones, productividad and conviewsión. All buttons must work correctly. Optimize for desktop, tablet, and mobile. Use smooth animations, claras, precisas and with buen rendimiento. Maintain the scene clean, premium, organized, tecnológica and fácil of navegar. Use márgenes amplios, separación clear between sections and buena jerarquía visual. Avoid copiar logos, nombres of brand or identidad visual exacta of Airtable; create a plataforma original of workspace visual. Work libremente for improve the scene 3D, the narrative of data, the vistas interactives, the automatizaciones, the parallax and the fluxury of conviewsión. Organización visual obligatoria: Use contenedores centrados with max-width of 1200px or 1280px. Each section must tener padding viewtical amplio: 96px a 140px in desktop. In mobile, use padding cómodo of 24px a 32px. Use gaps generosos between cards: 24px, 32px or 48px. No amontonar texts, tablas, dashboards, buttons, formularios ni cards. Separar each módulo with suficiente space visual. Use backgrounds alternados, gradientes smooth, bloques glassmorphism, líneas of data, grids or divisores subtle. The titles must tener space antes and después. The buttons must tener margen suficiente respecto when text. The cards must tener padding interno amplio. The tablas must tener filas and columnas legibles, with space clear between elements. The page must sentirse escaneable, productiva, premium and organized. Page structure: Header / Navbar: Logo: “DATAGRID 3D” Menú: Home, Workspace, Views, Automations, Templates, Integrations, Pricing, Contact Featured button: “Start Free” Button secundario: “View Demo” Fixed header with a translucent glassmorphism-style background clear u dark. Functional hamburger-style mobile menu. Smooth scroll to each section. Add microinteractions: Logo with animación subtle of celda or grid. Enlaces with underline animado. Buttons with elevación, glow azul/morado and feedback visual. Menú mobile with transición clean. Hero Section: Main title: “Build Visual Databases, Workflows and Dashboards in a 3D Workspace” Subtitle: “Organize projects, teams, content, CRM, operations and automations with flexible tables, Kanban boards, calendars, forms and connected dashboards.” Barra main of acción: Input: “What do you want to organize?” Selector: “Team / Project / CRM / Content / Operations” Button: “Generate Workspace” Buttons: “Explore 3D Workspace”: activa a animación guiada in the canvas 3D. “View Templates”: scrolls to Templates. “Start Free”: scrolls to Pricing or Signup. Background with workspace 3D: tablas flotantes, celdas, columnas, cards Kanban, calendarios, dashboards, formularios, nodos of automatización, iconos of apps, líneas of conexión, partículas smooth and depth visual. Add parallax between title, input, tablas, cards, celdas, dashboards, nodos, iconos and background. The hero must tener composition clear, plenty of aire visual and CTA visible. 3D Canvas / Visual Database Workspace: Create a 3D scene inside a canvas. The scene must represent a workspace of data visual in 3D. Include: Tabla 3D central with filas and columnas. Celdas flotantes. Registros expandibles. Columnas with diferentes tipos of campo. Cards Kanban. Calendario. Vista gallery. Vista timeline. Form builder. Dashboard with métricas. Nodos of automatización. Líneas of conexión. Avatares of colaboradores. Comentarios flotantes. Permisos and roles. Plantillas. Iconos of integraciones. CTA flotante for iniciar. Lights smooth, shadows limpias, glassmorphism and depth visual. The user should be able to explore visualmente the scene with smooth movement. The button “Explore 3D Workspace” must activate a visible animation where the camera entra a a tabla, convierte registros in cards Kanban, cambia a calendario, conecta automatizaciones and termina frente when CTA of “Start Free”. Add interactive hotspots: “Grid View” “Kanban Board” “Calendar View” “Form Builder” “Automation Flow” “Dashboard” “Integrations” “Start Free” Each hotspot must show brief information on hoview or click. 3D Scroll Storytelling: When scrolling, the camera must avanzar by capítulos: Data dispersos. Tabla central. Vistas flexibles. Colaboración. Formularios. Automatizaciones. Dashboards. Integraciones. Plantillas. Pricing and registro. Use transformaciones 3D: translateZ for depth. scale for destacar tablas, registros, cards, dashboards and CTAs. rotate smooth for celdas, cards, nodos, iconos and badges. fade for clean transitens. blur subtle for elements lejanos. movement of camera tipo fly-through by a workspace digital. split animation for separar data, vistas, automatizaciones and reporting. Create capas parallax: Capa frontal: titles, buttons, CTAs, filtros, precios and cards. Capa media: tablas, Kanban, calendarios, dashboards, formularios, nodos and hotspots. Capa of background: grids, líneas of data, integraciones, avatares, partículas, shadows and arquitectura abstracta. The elements of the background must moviewse más lento for generar depth. The tablas, cards and dashboards must aparecer from depth usando translateZ, scale and fade. The experience must sentirse as a product SaaS premium: clear, flexible, colaborativo, visual and ready for conviewtir. Product Oviewview Section: Título: “One Flexible Workspace for Eviewy Team” Explicar that the plataforma permite create bases of data visuales for projects, CRM, content, inventario, events, operaciones, soporte, hiring, product and workflows personalizados. Include 4 cards: “Visual Databases” “Custom Views” “Workflow Automation” “Team Collaboration” Each card must tener icono, description brief and animación of entrance with scroll. Add parallax with celdas, tablas, vistas, avatares and líneas of conexión. Views Section: Show vistas principales: Grid view. Kanban board. Calendar view. Gallery view. Timeline view. Form view. Dashboard view. List view. Each vista must include: Description. Mejor uso. Ejemplo of equipo. Button “Open View” Button “Switch View” “Open View” must open panel visual. “Switch View” must transform visualmente a tabla in the vista seleccionada. The transitions between vistas must sentirse smooth, with morphing visual. Grid / Table Builder Section: Create constructor of tabla visual. Include tipos of campo: Text. Number. Single select. Multi select. Date. Attachment. Checkbox. Link record. Formula. Collaborator. Status. Buttons: “Add Field” “Add Record” “Expand Record” “Sort Data” “Filter Data” “Add Field” must add columna visual simulada. “Add Record” must add fila simulada. “Expand Record” must open detalle of registro. “Sort Data” must reorganizar filas. “Filter Data” must filtrar registros. Use celdas flotantes, líneas limpias and microinteractions. Automations Section: Create builder of automatizaciones. Show fluxury: Trigger. Condition. Action. Notification. Update record. Send email. Create task. Sync integration. Ejemplos: “When status changes, notify team.” “When form is submitted, create record.” “When due date is near, send reminder.” “When deal is won, create onboarding task.” Buttons: “Run Automation” “Edit Flow” “Add Trigger” “Reset Flow” “Run Automation” must animar nodos and show confirmation. “Edit Flow” must open panel. “Add Trigger” must add nodo visual. “Reset Flow” must restaurar fluxury. The líneas must dibujarse progresivamente with scroll. Dashboard Section: Create dashboard visual: Total records. Active projects. Tasks completed. Revenue pipeline. Team workload. Upcoming deadlines. Form submissions. Automation runs. The métricas must animarse with conteo progresivo. Buttons: “Open Dashboard” “Customize Widgets” “Export Report” “Open Dashboard” must open panel. “Customize Widgets” must cambiar widgets. “Export Report” must show confirmation. Templates Section: Show plantillas: Project Tracker. CRM Pipeline. Content Calendar. Product Roadmap. Hiring Tracker. Event Planner. Inventory Manager. Bug Tracker. Client Portal. Marketing Campaigns. Each plantilla must include: Categoría. Description. Ideal for. Fields incluidos. Button “Preview Template” Button “Use Template” “Preview Template” must open vista previa. “Use Template” must seleccionar plantilla and show confirmation. The cards must tener hoview 3D, buena separación and design clear. Collaboration Section: Show colaboración: Comments. Mentions. Shared views. Roles and permissions. Activity history. Assigned records. Approval flow. Team avatars. Each elemento must tener card and button “View Collaboration Feature”. “View Collaboration Feature” must open detalle. Add avatares flotantes, comentarios, badges and parallax. Forms Section: Create form builder: Text input. Email. File upload. Dropdown. Date picker. Rating. Long text. Submit button. Buttons: “Build Form” “Preview Form” “Submit Test Form” “Build Form” must ensamblar fields. “Preview Form” must open vista of form. “Submit Test Form” must create registro simulado and show confirmation. Integrations Section: Show integraciones: Slack. Google Drive. Gmail. Microsoft Teams. Notion. Jira. Stripe. Zapier. Make. Webhooks. API. Each integración must aparecer as nodo, cubo or badge. When do hoview, must show qué conecta. Button “Explore Integrations” must open mapa of conexiones. Button “Request Integration” must open form corto. The líneas of conexión must animarse with scroll. Use Cases Section: Show casos of uso: Product teams. Marketing teams. Sales teams. Operations. HR and recruiting. Content creators. Agencies. Startups. Education. Nonprofits. Each caso must include: Problema. Solución. Resultado esperado. Plantilla recomendada. Button “Explore Use Case” “Explore Use Case” must open panel or filtrar templates. Security / Admin Section: Show features enterprise: Role-based permissions. Workspace controls. Audit logs. Data backup. SSO placeholder. API controls. Private views. Field permissions. Each feature must tener card, icono and description. Button “View Admin Controls” must open panel informativo. Use estética sobria, azul profundo, vidrio and líneas seguras. Pricing Section: Show planes: Free. Starter. Pro. Team. Enterprise. Each plan must include: Price fictional. Número of bases. Registros. Automatizaciones. Vistas. Integraciones. Soporte. Permisos. Button “Choose Plan” Button “Start Trial” “Choose Plan” must seleccionar plan and show resumen. “Start Trial” must take to Signup or Contact. Destacar “Pro” as recomendado. Maintain design clear, comparativo and with cards separadas. Testimonials Section: Add testimonios fictional: “We replaced scattered spreadsheets with one visual workspace.” “The views and automations made our operations clear and repeatable.” “The dashboards helped our team make decisions faster.” Use cards with glassmorphism, shadows smooth and animations of aparición. FAQ Section: Preguntas frecuentes: “Can I create multiple databases?” “Can I switch between grid, Kanban and calendar views?” “Can forms create records automatically?” “Can I automate repetitive tasks?” “Can teams collaborate in real time?” “Can I connect external tools?” “Is this mobile responsive?” Each pregunta must expandirse and contraerse correctly. Add microsmooth animations. Contact / Signup Section: Create a functional form with: Name. Email. Company. Team Size. Use Case. Current Tool. Plan Interest. Message. Button: “Create My Workspace” Validate fields básicos. Show mensaje of confirmación with resumen of solicitud. Include opción of newsletter and calendario visual simulado for demo. Footer: Include: Logo. Links rápidos. Workspace. Views. Automations. Templates. Integrations. Pricing. Contact. Terms. Privacy. Social links. Maintain clean design, amplio, tecnológico and professional. Required interactions: The menu must navigate smoothly to each section. “Explore 3D Workspace” must activate animación guiada in the canvas 3D. “View Templates” must take to Templates. “Start Free” must take to Pricing or Signup. “Generate Workspace” must show a workspace simulado según the opción elegida. The hotspots of the canvas must show information. “Open View” must open panel visual. “Switch View” must transform tabla in vista seleccionada. “Add Field” must add columna visual simulada. “Add Record” must add fila simulada. “Expand Record” must open detalle. “Sort Data” must reorganizar filas. “Filter Data” must filtrar registros. “Run Automation” must animar nodos and show confirmation. “Edit Flow” must open panel. “Add Trigger” must add nodo visual. “Reset Flow” must restaurar fluxury. “Open Dashboard” must open panel. “Customize Widgets” must cambiar widgets. “Export Report” must show confirmation. “Preview Template” must open vista previa. “Use Template” must seleccionar plantilla and show confirmation. “View Collaboration Feature” must open detalle. “Build Form” must ensamblar fields. “Preview Form” must open vista. “Submit Test Form” must create registro simulado and show confirmation. The nodos of integración must show information when hoview. “Explore Integrations” must open mapa. “Request Integration” must open form corto. “Explore Use Case” must open panel or filtrar templates. “View Admin Controls” must open panel. “Choose Plan” must seleccionar plan and show resumen. “Start Trial” must take to Signup or Contact. FAQ must expandirse and cerrarse correctly. “Create My Workspace” must validate fields and show confirmation. The form must validate fields and show confirmation. The mobile menu must open and close correctly. The scroll must activate animations 3D and parallax. Todos the buttons must tener hoview, active state and feedback visual. 3D scroll and parallax animations: When scrolling, the camera must moviewse from the hero hacia the tabla central, vistas, automatizaciones, dashboards, plantillas, integraciones, pricing and signup. The celdas must aparecer from depth usando translateZ, scale and fade. The columnas must expandirse lateralmente with animación smooth. The filas must deslizarse as registros vivos. The cards Kanban must organizarse in columnas with morphing from grid. The calendario must desplegarse as plano 3D. The nodos of automatización must encenderse secuencialmente. The líneas of conexión must dibujarse progresivamente. The dashboards must activate gráficos, barras, KPIs and contadores. The formularios must ensamblarse campo by campo. The plantillas must aparecer as bloques reutilizables. The integraciones must conectarse with líneas luminosas. The cards of pricing must elevarse with hoview 3D. The form of signup must aparecer with transición clean from depth. The backgrounds, grids, partículas, líneas of data, iconos lejanos and shadows must moviewse más lento for generar depth. Add glow azul/cian/morado, reflejos of cristal, shadows limpias, partículas smooth, líneas of data, motion trails subtle and feeling of workspace inteligente. Avoid movimientos bruscos, rápidos or caóticos. The experience must sentirse as a SaaS premium of productividad: clear, flexible, visual, potente, colaborativa and ready for conviewtir. Visual style: Tecnológico, productivo, clean, flexible, premium, colaborativo and confiable. Inspiración visual: herramientas of base of data visual, spreadsheets moderns, SaaS dashboards, project management tools, workflows automatizados, CRMs visuales, no-code tools, paneles of operaciones and workspaces colaborativos. Paleta sugerida: Blanco frío. Azul noche. Cian eléctrico. Morado tecnológico. Verde éxito. Coral smooth for acentos. Gris grafito. Negro profundo. Amarillo smooth for estados destacados. Use glassmorphism, cards limpias, tablas 3D, dashboards, celdas flotantes, nodos, líneas of conexión, avatares, shadows smooth, bordes redondeados and composition respirable. Tipografía modern, legible, professional and orientada a product. Composition clear, modular, espaciosa and of high-end. Buttons with microinteractions smooth. Feeling of orden, productividad, flexibilidad, automatización, colaboración, claridad and escalabilidad. Expected result: A landing page complete, immersive and functional for “Airtable Clone 3D”, with canvas 3D, workspace of data visual, tablas, vistas Grid/Kanban/Calendar/Gallery/Timeline/Form/Dashboard, constructor of tablas, automatizaciones, dashboards, plantillas, colaboración, formularios, integraciones, casos of uso, seguridad, pricing, testimonios, FAQ, signup, form functional, scroll animations 3D, parallax, hotspots, functional buttons, design responsive, márgenes amplios, separación clear between componentes and estética premium of SaaS colaborativo. Work with creative freedom to improve the scene 3D, the tablas, the vistas, the workflows, the automatizaciones, the dashboards, the plantillas, the microinteractions, the arquitectura visual, the parallax, the animations and the fluxury of conviewsión. Prioritize making the page look like a real high-end websitesite for presentar a plataforma visual of bases of data, explicar valor rápido, show flexibilidad, generar trust and conviewtir visitantes in usuarios registrados, equipos or demos solicitadas.
Landing Pages
Fiverr
clone
Fiverr Clone — Freelance marketplace
[ { "name": "Fiverr Clone 3D", "suggested_original_brand": "SkillMarket 3D", "suggested_route": "fiverr-clone", "objective": "Develop a modern, immersive, functional and professional premium landing page for a freelance marketplace inspired by digital service platforms, where clients can find talent, hire services, compare freelancers, review portfolios, post projects, buy packages, manage orders and contact specialists.", "brand_note": "Create a fictional and original platform inspired by freelance marketplaces, without copying logos, commercial names, exact visual identity, official text, proprietary assets or the exact design of Fiverr. Use an original brand such as “SkillMarket 3D”, “TalentForge”, “GigSphere” or “WorkNest”. Keep the conceptual functionality of a freelance marketplace, but use a unique visual identity, original categories, fictional freelancers and invented services.", "main_concept": "The website should feel like entering a 3D market of digital talent. As the user scrolls, the camera moves through a creative hub with service booths, floating screens, gig cards, freelancer profiles, categories, ratings, deliverables, chats, contracts, packages, filters, an order board, verification badges and a simulated checkout.", "main_requirements": [ "Create a complete, modern, functional and responsive landing page.", "Include a visible 3D canvas integrated into the main experience.", "Add 3D scroll animations.", "Add parallax effects on text, gig cards, freelancers, booths, screens, categories, ratings, badges, chats, orders, buttons, filters, icons and backgrounds.", "Create an experience focused on freelance marketplaces, service hiring, gigs, categories, profiles, packages, reviews, orders, security, simulated payments and conversion.", "All buttons must work correctly.", "Optimize for desktop, tablet and mobile.", "Use smooth, modern, commercial and performant animations.", "Keep the scene clear, premium, organized, trustworthy and easy to navigate.", "Use generous margins, clear separation between sections and strong visual hierarchy.", "Avoid visual clutter: the page should feel alive, useful, professional and scannable." ], "expected_result": "A complete, immersive and functional landing page for “Fiverr Clone 3D”, with a 3D canvas, original freelance marketplace, search, categories, featured gigs, freelancer profiles, gig detail, packages, order management, chat, buyer request, seller onboarding, seller dashboard, trust, pricing, FAQ, signup, functional form, simulated checkout, 3D scroll animations, parallax, hotspots, functional buttons, responsive design, generous margins, clear component separation and a premium digital services marketplace aesthetic." }, { "name": "Fútbol 3D", "suggested_route": "futbol", "objective": "Develop a modern, sporty, immersive, energetic and functional premium landing page for a football club, academy, league, tournament, stadium, sports app, fan community, official store, ticket sales platform or football content platform.", "main_concept": "The website should feel like entering a 3D football stadium on matchday. As the user scrolls, the camera moves from the locker-room tunnel toward the pitch, shows the ball at the center, activates the stadium lights, reveals stands with abstract fans, shows the scoreboard and presents players, fixtures, tickets, shop, statistics and community.", "main_requirements": [ "Create a complete, modern, functional and responsive landing page.", "Include a visible 3D canvas integrated into the main experience.", "Add 3D scroll animations.", "Add parallax effects on text, ball, players, stands, lights, grass, scoreboard, cards, banners, jerseys, buttons, smoke, particles and backgrounds.", "Create an experience focused on football, stadium, club, players, matches, statistics, fans, tickets, shop, community and conversion.", "All buttons must work correctly.", "Optimize for desktop, tablet and mobile.", "Use smooth, sporty, exciting and performant animations.", "Use fictional data for matches, players, statistics, prices and rankings." ], "expected_result": "A complete, immersive and functional landing page for “Fútbol 3D”, with a 3D canvas, interactive stadium, ball, players, profiles, matches, match center, stadium tour, tickets, statistics, league table, news, fan zone, academy, shop, membership, sponsors, FAQ, contact, functional form, simulated checkout, 3D scroll animations, parallax, hotspots, functional buttons, responsive design, generous margins, clear component separation and a premium football aesthetic." } ]
Landing Pages
Square
clone
Square Clone — Payments and POS
{ "name": "BlockPay Commerce 3D", "suggested_route": "square-clone", "original_brand": "BlockPay Commerce", "objective": "Develop a modern, enterprise-grade, fintech, immersive and functional premium landing page for a fictional and original payments and commerce platform featuring point of sale, invoicing, online store creation, inventory management, customers, bookings, staff, financial reports, payment terminals, payment links, subscriptions, orders, analytics and tools for small businesses.", "brand_note": "Create a fictional and original platform inspired by modern payment and commerce solutions for businesses, without copying logos, commercial names, exact visual identity, official text, proprietary assets, real hardware, official colors, specific visual structure or the exact design of Square, Block or any other real brand. Use an original brand such as “BlockPay Commerce”, “PayNest”, “CommerceGrid”, “MerchantFlow” or “PointPilot”. Keep the conceptual functionality of POS, payments, inventory, ecommerce and invoicing, but use completely original identity, UI, data, hardware, text, iconography and examples.", "main_concept": "The website should feel like entering a 3D digital store where every sale becomes clear business data. As the user scrolls, the camera moves through a modern counter with a payment terminal, POS tablet, products, floating receipts, abstract bank cards, inventory, cart, orders, invoices, financial dashboard, online store and customer panel. Each section represents a stage of the business: selling, charging, issuing receipts, managing inventory, selling online, invoicing, understanding customers, measuring results and growing. Scrolling must control the camera, visual depth, parallax, receipt appearance, terminal movement, checkout animation and the transition toward signup or demo.", "main_requirements": [ "Create a complete, modern, functional and responsive landing page.", "Include a visible 3D canvas integrated into the main experience.", "Add 3D scroll animations.", "Add parallax effects on text, POS terminal, tablet, receipts, cards, products, dashboards, inventory, invoices, buttons, customers, charts and backgrounds.", "Create an experience focused on payments, point of sale, ecommerce, inventory, invoicing, customers, staff, bookings, reports, payment links, security, plans and conversion.", "All buttons must work correctly.", "Optimize for desktop, tablet and mobile.", "Use smooth, professional, fintech-style and performant animations.", "Keep the scene clear, premium, trustworthy, commercial, organized and easy to navigate.", "Use generous margins, clear separation between sections and strong visual hierarchy.", "Avoid visual clutter: the page should feel light, trustworthy, scannable, modern and ready for real business scenarios.", "Use fictional data for sales, prices, customers, products, transactions, fees, inventory, invoices, reports and plans.", "Do not promise payment approval, banking availability, financial results or perfect security.", "Include messages such as “demo payment flow”, “example transaction data”, “fees are fictional” and “review payment rules before launch”." ], "visual_organization": { "max_width": "1200px or 1280px", "desktop_padding": "96px to 150px", "mobile_padding": "24px to 32px", "gaps": [ "24px", "32px", "48px" ], "backgrounds": [ "clean white", "graphite black", "success green", "midnight blue", "glassmorphism blocks", "fintech gradients", "receipt lines", "commerce grids", "subtle dividers" ], "rules": [ "Do not crowd products, receipts, dashboards, prices, buttons, forms or 3D visuals.", "Separate each commercial block with enough visual space.", "Titles must have space before and after.", "Buttons must have enough margin from text.", "Cards must have generous internal padding.", "Product cards must clearly show name, category, fictional price, stock, state, variant and CTA.", "Transaction cards must show fictional amount, method, status, time, customer, receipt and CTA.", "Dashboards must be readable, with simple charts, counters, bars, clean tables and visual states.", "The page must feel scannable, fintech, SaaS, premium and organized." ] }, "structure": { "header": { "logo": "BLOCKPAY COMMERCE", "menu": [ "Home", "POS", "Payments", "Online Store", "Invoices", "Analytics", "Pricing", "Contact" ], "buttons": [ "Start Selling", "Book Demo" ], "description": "Fixed header with a light or dark translucent glassmorphism background, functional mobile hamburger menu and smooth scrolling to each section.", "microinteractions": [ "Logo with an abstract square that lights up like a payment chip.", "Links with animated underline.", "Buttons with elevation, green/cyan glow and visual feedback.", "Clean mobile menu transition." ] }, "hero": { "title": "Run Payments, POS and Commerce From One 3D Business Hub", "subtitle": "Accept demo payments, manage inventory, send invoices, launch an online store and track business performance from one connected commerce platform.", "main_action": { "input": "What do you want to sell?", "selector": "Retail / Restaurant / Services / Appointments / Online Store / Invoices / Subscriptions", "button": "Create Commerce Workspace" }, "buttons": [ "Enter Commerce Hub", "Try POS Demo", "Start Free" ], "background": "3D counter with payment terminal, POS tablet, products, abstract cards, floating receipts, cart, financial dashboard, inventory, orders and visual depth.", "visible_text": "Demo payment flow with fictional transaction data." }, "canvas_3d": { "name": "Commerce Hub Experience", "description": "Create a 3D scene inside a canvas representing a premium commerce center for businesses.", "elements": [ "3D POS terminal", "Tablet with sales interface", "Product cards", "Floating receipts", "Abstract bank card", "QR payment placeholder", "Shopping cart", "Visual inventory", "Floating invoice", "Sales dashboard", "Revenue chart", "Online order", "Abstract customer", "Staff schedule card", "Floating signup CTA" ], "main_animation": "The “Enter Commerce Hub” button must activate a visible animation where the camera enters the counter, selects a product, adds it to the cart, processes a demo payment, generates a receipt, subtracts inventory, updates the dashboard and ends in front of the “Start Selling” CTA.", "hotspots": [ "POS Terminal", "Demo Payment", "Inventory", "Online Store", "Invoices", "Customer Profile", "Analytics", "Start Selling" ] }, "scroll_3d_storytelling": { "chapters": [ "Counter entrance", "POS", "Checkout and payments", "Inventory", "Online store", "Invoicing", "Customers", "Staff and bookings", "Analytics", "Pricing and signup" ], "transforms": [ "translateZ for depth", "scale to highlight terminal, tablet, receipts, products, dashboards, invoices and CTAs", "soft rotate for cards, receipts, badges, products, integration cubes and widgets", "fade for clean transitions", "subtle blur for distant elements", "camera movement through a fintech store", "split animation to separate sale, payment, receipt, inventory, report and growth" ], "parallax_layers": { "front": "Titles, buttons, CTAs, filters, prices, metrics, forms and cards.", "middle": "Terminal, tablet, products, receipts, invoices, dashboards, hotspots and cart.", "background": "Store, counter, lights, grids, labels, distant screens, particles and shadows." } }, "sections": [ { "name": "Platform Overview", "title": "Everything Your Business Needs to Sell Anywhere", "description": "Explain that BlockPay Commerce helps businesses sell in person, online and by invoice while centralizing inventory, customers, staff, reports and operations.", "cards": [ "Point of Sale", "Demo Payments", "Inventory Sync", "Business Analytics" ] }, { "name": "POS Demo", "elements": [ "Product catalog", "Cart", "Quantities", "Fictional discounts", "Tax placeholder", "Total", "Demo payment methods: card, cash, QR, payment link" ], "buttons": [ "Add Product", "Apply Discount", "Process Demo Payment", "Print Receipt" ], "note": "No real payment is processed." }, { "name": "Payments", "methods": [ "Card reader", "Tap to pay placeholder", "QR payment", "Payment links", "Invoices", "Online checkout", "Subscriptions", "Gift cards placeholder" ], "fields": [ "Description", "Use case", "Demo status" ], "buttons": [ "Preview Payment", "Enable Demo" ] }, { "name": "Transactions", "fictional_transactions": [ "Coffee Bundle — $18.50", "Retail Order — $74.00", "Service Deposit — $120.00", "Online Checkout — $39.99", "Invoice Paid — $450.00", "Subscription Renewal — $29.00" ], "fields": [ "Fictional customer", "Method", "Status", "Time", "Receipt" ], "statuses": [ "paid", "pending", "refunded", "failed demo" ], "buttons": [ "Open Transaction", "Send Receipt", "Refund Demo" ] }, { "name": "Inventory", "fictional_products": [ "Ceramic Mug", "Minimal T-Shirt", "Coffee Beans", "Desk Lamp", "Gift Card", "Consulting Session", "Notebook Pack", "Handmade Candle" ], "fields": [ "Fictional SKU", "Category", "Price", "Stock", "Variants", "Status" ], "buttons": [ "Edit Product", "Update Stock", "Low Stock Alert", "Add Variant" ] }, { "name": "Online Store", "elements": [ "Storefront preview", "Product grid", "Cart", "Checkout demo", "Shipping placeholder", "Pickup option", "Promo banner" ], "buttons": [ "Preview Store", "Add Product to Store", "Customize Theme", "Publish Demo Store" ], "note": "Keep the store original and do not copy real marketplaces." }, { "name": "Invoices", "elements": [ "Customer", "Service", "Items", "Date", "Due date", "Fictional total" ], "statuses": [ "draft", "sent", "paid", "overdue" ], "buttons": [ "Create Invoice", "Send Invoice", "Mark as Paid", "Download Invoice" ] }, { "name": "Customer CRM", "elements": [ "Customer profile", "Purchase history", "Fictional total spend", "Last visit", "Preferences", "Notes", "Segments" ], "buttons": [ "Open Customer", "Add Note", "Create Segment", "Send Offer" ] }, { "name": "Appointments / Staff", "elements": [ "Calendar", "Services", "Team members", "Schedules", "Bookings", "Commission placeholder" ], "buttons": [ "Book Appointment", "Assign Staff", "Create Service", "View Schedule" ] }, { "name": "Financial Dashboard", "elements": [ "Daily sales", "Fictional net revenue", "Average order value", "Top products", "Payment methods", "Demo refunds", "Inventory alerts", "Cash flow placeholder" ], "buttons": [ "Open Dashboard", "Add Widget", "Export Report", "Compare Periods" ] }, { "name": "Payment Links / Subscriptions", "elements": [ "Payment link generator", "Subscription plan", "One-time checkout", "Customer portal placeholder", "Recurring billing demo" ], "buttons": [ "Create Payment Link", "Copy Link", "Create Subscription", "Pause Subscription" ] }, { "name": "Integrations", "integrations": [ "Accounting", "Ecommerce", "Delivery", "Email marketing", "Calendar", "Inventory supplier", "CRM", "Analytics", "Webhooks", "API" ], "buttons": [ "Explore Integrations", "Connect Demo Integration", "Request Integration" ] }, { "name": "Security / Compliance", "elements": [ "Secure checkout placeholder", "Role permissions", "Staff access", "Audit log", "Receipt history", "Dispute management placeholder", "Export controls", "Payment rules reminder" ], "button": "View Security Details", "message": "Payment, tax and compliance requirements depend on your region and provider." }, { "name": "Use Cases", "use_cases": [ "Coffee shops", "Retail stores", "Restaurants", "Service providers", "Salons", "Freelancers", "Online sellers", "Pop-up markets" ], "fields": [ "Problem", "Recommended workflow", "Suggested tools", "Expected result" ], "button": "Explore Use Case" }, { "name": "Pricing", "plans": [ "Free Seller", "POS Starter", "Commerce Plus", "Retail Pro", "Business Suite" ], "recommended_plan": "Commerce Plus", "fields": [ "Fictional price", "POS", "Demo payments", "Products", "Inventory", "Invoices", "Online store", "Analytics", "Staff", "Support" ], "buttons": [ "Choose Plan", "Start Trial" ], "note": "Processing fees shown are fictional placeholders." }, { "name": "Testimonials", "fictional_testimonials": [ "BlockPay made checkout, receipts and inventory feel connected from day one.", "The 3D POS demo helped us understand how sales update the dashboard instantly.", "Invoices, payment links and online store tools felt simple for a small business." ] }, { "name": "FAQ", "questions": [ "Is this an official Square website?", "Can I process real payments here?", "Can I manage inventory?", "Can I send invoices?", "Can I create an online store?", "Are fees and transaction data real?", "Is the platform responsive on mobile?" ], "note": "Include a clear answer explaining that this is a fictional original platform with no affiliation to Square, Block or any other real brand." }, { "name": "Signup / Contact", "fields": [ "Name", "Email", "Business Name", "Business Type", "Monthly Sales Range", "Main Commerce Need", "Plan Interest", "Preferred Demo Time", "Message", "Consent Checkbox" ], "button": "Create BlockPay Workspace", "checkbox": "I understand this is a fictional commerce platform concept with simulated payment and transaction data.", "extras": [ "Validate basic fields.", "Show a confirmation message with the request summary.", "Include a small business commerce newsletter option and a simulated visual demo calendar." ] } ], "footer": { "logo": "BLOCKPAY COMMERCE", "text": "Original fictional commerce and payments platform concept. Not affiliated with Square, Block or any real payment brand.", "links": [ "POS", "Payments", "Inventory", "Online Store", "Invoices", "Customers", "Analytics", "Integrations", "Security", "Pricing", "Contact", "Terms", "Privacy", "Payment Disclaimer", "Social links" ] } }, "required_interactions": [ "The menu must navigate smoothly to each section.", "Enter Commerce Hub must activate the guided animation in the 3D canvas.", "Try POS Demo must go to POS Demo.", "Start Free must go to Pricing or Signup.", "Create Commerce Workspace must create a simulated view based on the selected business type.", "Canvas hotspots must show information.", "Add Product must add a product to the cart.", "Apply Discount must update the total.", "Process Demo Payment must simulate an approved payment.", "Print Receipt must show a receipt.", "Preview Payment must open a flow.", "Enable Demo must change state.", "Open Transaction must open details.", "Send Receipt must show confirmation.", "Refund Demo must change state.", "Edit Product must open a panel.", "Update Stock must change inventory.", "Low Stock Alert must create an alert.", "Add Variant must add a variant.", "Preview Store must open a preview.", "Add Product to Store must add a product.", "Customize Theme must change the visual style.", "Publish Demo Store must show confirmation.", "Create Invoice must create an invoice.", "Send Invoice must change state.", "Mark as Paid must update state.", "Download Invoice must show confirmation.", "Open Customer must open a profile.", "Add Note must add a note.", "Create Segment must create a segment.", "Send Offer must show confirmation.", "Book Appointment must create a simulated booking.", "Assign Staff must change the assigned person.", "Create Service must create a service.", "View Schedule must open a calendar.", "Open Dashboard must open a panel.", "Add Widget must add a widget.", "Export Report must show confirmation.", "Compare Periods must show comparison.", "Create Payment Link must generate a fictional link.", "Copy Link must show confirmation.", "Create Subscription must create a recurring plan.", "Pause Subscription must change state.", "Explore Integrations must open a map.", "Connect Demo Integration must activate a simulated connection.", "Request Integration must open a short form.", "View Security Details must open a panel.", "Explore Use Case must open a panel or filter modules.", "Choose Plan must select a plan and show a summary.", "Start Trial must go to Signup or Contact.", "FAQ must expand and collapse correctly.", "Create BlockPay Workspace must validate fields, checkbox and show confirmation.", "The form must validate fields and show confirmation.", "The mobile menu must open and close correctly.", "Scroll must activate 3D animations and parallax.", "All buttons must have hover, active state and visual feedback." ], "animations_3d_and_parallax": [ "On scroll, the camera must move from the counter toward POS, payments, transactions, inventory, online store, invoices, customers, bookings, dashboard, payment links, integrations, pricing and signup.", "The POS terminal must light up when a demo payment is processed.", "The tablet must switch screens between cart, products, checkout and receipt.", "Receipts must appear from depth using translateZ, scale and fade.", "Abstract bank cards must slide smoothly toward the terminal.", "Products must stack as 3D commercial objects.", "Inventory must update stock with micro-animation.", "Invoices must emerge as floating documents.", "Financial charts must grow progressively.", "Payment links must be generated as glowing chips.", "Integrations must connect with animated lines.", "Pricing cards must lift with 3D hover.", "The form must appear from depth with a clean transition.", "Backgrounds, counter, store, lights, distant screens, particles, commerce grids and shadows must move more slowly to create depth.", "Add success green glow, electric cyan, clean white, graphite black, midnight blue, subtle silver, soft orange for alerts, soft red for errors, clean shadows, glass reflections and a premium commerce fintech platform feeling.", "Avoid abrupt, fast, chaotic movement or anything that makes prices and states hard to read." ], "visual_style": { "description": "Fintech, commerce SaaS, modern, clean, premium, trustworthy, minimalist and enterprise-oriented.", "inspiration": [ "Modern points of sale", "Payment terminals", "Financial dashboards", "Ecommerce", "Inventory", "Invoicing", "Small business tools", "Digital receipts", "Payment links", "Commerce systems" ], "palette": [ "Clean white", "Graphite black", "Success green", "Electric cyan", "Midnight blue", "Silver gray", "Soft cream", "Soft orange for alerts", "Soft red for errors" ], "assets": [ "Glassmorphism", "Clean cards", "3D POS terminal", "Tablet", "Receipts", "Products", "Dashboards", "Invoices", "Customers", "Integrations", "Soft shadows", "Rounded borders" ], "typography": "Modern, readable, professional and business-oriented.", "feeling": "Trust, speed, control, modern commerce, cash flow, operational order, simple payments and business growth." }, "expected_result": "A complete, immersive and functional landing page for “Square Clone 3D”, with an original “BlockPay Commerce” identity, 3D canvas, commerce counter, POS terminal, tablet, demo payments, transactions, inventory, online store, invoices, customers, bookings, financial dashboard, payment links, subscriptions, integrations, security, use cases, pricing, testimonials, FAQ, signup, functional form with fictional concept checkbox, 3D scroll animations, parallax, hotspots, functional buttons, responsive design, generous margins, clear component separation and a premium original commerce/fintech platform aesthetic." }
Landing Pages
Snapchat
clone
Snapchat Clone — Stories and AR
{ "name": "SnapWave 3D", "suggested_route": "snapchat-clone", "original_brand": "SnapWave", "objective": "Create a modern, social, colorful, immersive and functional premium landing page for a fictional and original social camera app featuring stories, simulated ephemeral messages, AR-style filters, creative lenses, avatars, chat, social maps, groups, creators, memories, privacy, community and fast visual content.", "brand_note": "Create a fictional and original platform inspired by modern social camera and visual messaging apps, without copying logos, commercial names, exact visual identity, official icons, assets, real filters, protected interfaces, official colors, mascots, official text or the exact design of Snapchat or any other real brand. Use an original brand such as “SnapWave”, “BlinkCam”, “FlashLoop”, “StoryPop” or “Lensly”. Keep the conceptual functionality of social camera, stories and AR-style filters, but use completely original identity, UI, names, avatars, filters, examples and text.", "main_concept": "The website should feel like entering a 3D social world built around a mobile camera. As the user scrolls, the camera moves from a floating smartphone into a visual universe with vertical stories, chat bubbles, AR-style filters, animated lenses, avatars, stickers, social maps, memories and creators. Each section represents a key experience: capture, edit, share, chat, discover, remember and control privacy. Scrolling must control the camera, visual depth, parallax, smartphone movement, story appearance, filter glow, message animation and the transition toward signup.", "main_requirements": [ "Create a complete, modern, functional and responsive landing page.", "Include a visible 3D canvas integrated into the main experience.", "Add 3D scroll animations.", "Add parallax effects on text, smartphone, camera, AR-style filters, stories, chats, avatars, stickers, map, buttons, cards, particles and backgrounds.", "Create an experience focused on social camera, stories, simulated ephemeral messages, AR-style filters, creativity, community, privacy, discovery and conversion.", "All buttons must work correctly.", "Optimize for desktop, tablet and mobile.", "Use smooth, playful, fluid and performant animations.", "Keep the scene clear, premium, joyful, visual, organized and easy to navigate.", "Use fictional data for users, stories, chats, filters, avatars, maps, plans, creators and metrics.", "Do not promise absolute privacy or perfect security.", "Use responsible language such as “privacy controls”, “demo data”, “simulated ephemeral messages” and “review settings before sharing”." ], "visual_organization": { "max_width": "1200px or 1280px", "desktop_padding": "96px to 150px", "mobile_padding": "24px to 32px", "gaps": [ "24px", "32px", "48px" ], "backgrounds": [ "original soft yellow", "deep black", "clean white", "midnight blue", "glassmorphism blocks", "vibrant gradients", "social grids", "bubbles", "subtle dividers" ], "rules": [ "Do not crowd stories, chats, filters, buttons, forms, pricing or 3D visuals.", "Separate each social block with enough visual space.", "Titles must have space before and after.", "Buttons must have enough margin from text.", "Cards must have generous internal padding.", "Story cards must clearly show fictional user, duration, mood, filter used, state and CTA.", "Filter cards must show name, category, effect, compatibility, fictional popularity and CTA.", "Chats must have readable bubbles, fictional timestamps, states and clear controls.", "The page must feel scannable, social, premium and organized." ] }, "structure": { "header": { "logo": "SNAPWAVE", "menu": [ "Home", "Camera", "Stories", "Lenses", "Chat", "Map", "Privacy", "Pricing", "Contact" ], "buttons": [ "Start Snapping", "Explore Lenses" ], "description": "Fixed header with a light or dark translucent glassmorphism background, functional mobile hamburger menu and smooth scrolling to each section.", "microinteractions": [ "Logo with a glowing wave and soft flash.", "Links with animated underline.", "Buttons with elevation, yellow/cyan/violet glow and visual feedback.", "Clean mobile menu transition." ] }, "hero": { "title": "A 3D Social Camera for Fast, Fun and Creative Moments", "subtitle": "Capture playful stories, add AR-style lenses, send simulated ephemeral messages and explore your social world from one visual app concept.", "main_action": { "input": "What moment do you want to share?", "selector": "Story / Chat / Lens / Avatar / Memory / Group / Map", "button": "Create Snap Demo" }, "buttons": [ "Enter SnapWave", "Try Lenses", "Start Free" ], "background": "Floating 3D smartphone, active camera, vertical stories, chat bubbles, AR-style filters, stickers, avatars, social map, flash particles, soft bubbles and visual depth.", "visible_text": "Demo social app concept with simulated users and messages." }, "canvas_3d": { "name": "Social Camera Experience", "description": "Create a 3D scene inside a canvas representing a premium visual social universe.", "elements": [ "Central 3D smartphone", "Open camera", "3D capture button", "Floating vertical stories", "Simulated AR-style filters", "Creative lenses", "Stickers", "Animated text", "Abstract avatars", "Chat bubbles", "Social map", "Memories as cards", "Privacy panel", "Floating signup CTA" ], "main_animation": "The “Enter SnapWave” button must activate a visible animation where the camera enters the smartphone, focuses on the viewfinder, activates an AR-style filter, captures a snap, turns it into a story, sends a simulated ephemeral message, opens the social map and ends in front of the “Start Snapping” CTA.", "hotspots": [ "Camera", "AR Lens", "Stories", "Ephemeral Chat", "Avatar", "Social Map", "Privacy Controls", "Start Snapping" ] }, "scroll_3d_storytelling": { "chapters": [ "Entering the smartphone", "Social camera", "Filters and lenses", "Stories", "Ephemeral chat", "Avatars", "Social map", "Memories", "Privacy", "Final signup" ], "transforms": [ "translateZ for depth", "scale to highlight smartphone, stories, filters, chats, avatars, map and CTAs", "soft rotate for stickers, cards, avatars, icons and lenses", "fade for clean transitions", "subtle blur for distant elements", "camera movement through a social universe", "flash and soft wave animation when capturing" ], "parallax_layers": { "front": "Titles, buttons, CTAs, filters, names, states and cards.", "middle": "Smartphone, camera, stories, chats, avatars, hotspots, map and stickers.", "background": "Gradients, bubbles, particles, flashes, social patterns, lights and shadows." } }, "sections": [ { "name": "Platform Overview", "title": "Capture, Play, Share and Stay Connected", "description": "Explain that SnapWave lets users capture moments, apply creative lenses, share stories, send simulated ephemeral messages, create avatars and control privacy from one visual experience.", "cards": [ "Social Camera", "AR-Style Lenses", "Ephemeral Chats", "Privacy Controls" ] }, { "name": "Camera", "elements": [ "Camera view placeholder", "Capture button", "Switch camera button", "Timer button", "Flash button", "Format selector: snap, story, spotlight, memory" ], "buttons": [ "Capture Demo", "Switch Camera", "Add Text", "Save Memory" ] }, { "name": "Lenses / Filters", "filters": [ "Neon Wings", "Pixel Clouds", "Cosmic Glow", "Golden Flash", "Cyber Mask", "Dream Bubbles", "Retro VHS", "Crystal Face", "Rainy Mood", "Festival Lights" ], "fields": [ "Category", "Effect", "Fictional popularity", "Compatibility", "Mood" ], "buttons": [ "Preview Lens", "Apply Lens", "Save Lens" ] }, { "name": "Stories", "stories": [ "Ava’s Morning Walk", "Leo’s Food Tour", "Mia’s Study Night", "Noah’s Skate Clip", "Sofia’s Concert Lights", "Kai’s Travel Moment", "Luna’s Art Desk", "Max’s City Sunset" ], "fields": [ "Fictional user", "Duration", "Mood", "Filter used", "Fictional views", "Status" ], "buttons": [ "Open Story", "React", "Add to Favorites" ] }, { "name": "Story Viewer", "elements": [ "Vertical screen", "Progress bar", "User", "Text overlay", "Reactions", "Reply", "Pause", "Next story", "Close" ], "buttons": [ "Pause Story", "Next Story", "Reply", "Close Story" ] }, { "name": "Ephemeral Chat", "elements": [ "Fictional friends list", "Message bubbles", "Visual timer", "State: opened, sent, viewed, expired", "Reactions", "Snap preview" ], "buttons": [ "Open Chat", "Send Demo Message", "Set Timer", "Clear Conversation" ], "note": "Ephemeral behavior is simulated for demo purposes." }, { "name": "Avatar Builder", "elements": [ "Abstract 3D avatar", "Hair", "Face", "Outfit", "Mood", "Accessories", "Color palette" ], "buttons": [ "Randomize Avatar", "Save Avatar", "Change Outfit", "Create Sticker Pack" ], "note": "Keep avatars original and do not copy real characters or protected styles." }, { "name": "Social Map", "elements": [ "Abstract 3D map", "Fictional friends", "Popular places", "Events", "Story zones", "Privacy toggle", "Location sharing status" ], "buttons": [ "Open Map", "Show Friends", "Toggle Location", "Explore Stories Nearby" ], "message": "Location sharing is simulated. Real apps should request clear permission." }, { "name": "Memories", "elements": [ "Saved snaps", "Favorite stories", "Lens history", "Private collection placeholder", "Date filter", "Search memory" ], "buttons": [ "Open Memories", "Save Current Snap", "Search Memories", "Create Highlight" ] }, { "name": "Discover / Creators", "creators": [ "Lens Maker Studio", "Travel Clips Daily", "Food Flash", "Mini Comedy Lab", "Study Stories", "Street Art Now", "Music Moments", "Style Loop" ], "fields": [ "Category", "Description", "Fictional followers", "Content type" ], "buttons": [ "Open Creator", "Follow", "Share" ] }, { "name": "Groups", "groups": [ "Study Crew", "Travel Friends", "Gaming Squad", "Design Circle", "Family Chat", "Creator Team" ], "fields": [ "Fictional members", "Last activity", "Type", "Privacy" ], "buttons": [ "Open Group", "Create Group", "Invite Friend" ] }, { "name": "Privacy / Safety", "controls": [ "Who can contact me", "Story visibility", "Location sharing", "Screenshot notice placeholder", "Block/report placeholder", "Data controls", "Account security", "Private memories placeholder" ], "buttons": [ "Open Privacy Settings", "Toggle Story Visibility", "Review Safety Tips" ] }, { "name": "Creator Tools", "tools": [ "Lens studio placeholder", "Story analytics", "Audience insights", "Scheduled posts placeholder", "Creator profile", "Monetization concept placeholder", "Brand safety note" ], "buttons": [ "Open Creator Tools", "Create Lens Concept", "View Analytics", "Apply as Creator" ] }, { "name": "Pricing / Membership", "plans": [ "Free Snapper", "Lens Plus", "Creator Mode", "Family Circle", "Studio Pro" ], "recommended_plan": "Lens Plus", "fields": [ "Fictional price", "Saved lenses", "Stories", "Memories", "Avatars", "Creator tools", "Privacy controls", "Support" ], "buttons": [ "Choose Plan", "Start Free" ] }, { "name": "Testimonials", "fictional_testimonials": [ "SnapWave made the camera feel like a playful 3D social world.", "The lens previews and story viewer made sharing moments feel fast and creative.", "Privacy controls were clear and easy to understand in the demo." ] }, { "name": "FAQ", "questions": [ "Is this an official Snapchat website?", "Are the users and messages real?", "Can I preview AR-style lenses?", "Can I send ephemeral messages?", "Can I control location sharing?", "Can I create an avatar?", "Is the experience responsive on mobile?" ], "note": "Include a clear answer explaining that this is a fictional original social app with no affiliation to Snapchat or any real social platform." }, { "name": "Signup / Contact", "fields": [ "Name", "Email", "Username", "Favorite Feature", "Creator Interest", "Privacy Preference", "Plan Interest", "Message", "Consent Checkbox" ], "button": "Create SnapWave Account", "checkbox": "I understand this is a fictional social camera app concept with simulated data.", "extras": [ "Validate basic fields.", "Show a confirmation message with the request summary.", "Include a lens newsletter option and a sample creator pack download." ] } ], "footer": { "logo": "SNAPWAVE", "text": "Original fictional social camera app concept. Not affiliated with Snapchat or any real social platform.", "links": [ "Camera", "Stories", "Lenses", "Chat", "Avatar", "Map", "Memories", "Privacy", "Creators", "Pricing", "Contact", "Terms", "Privacy", "Safety Note", "Social links" ] } }, "required_interactions": [ "The menu must navigate smoothly to each section.", "Enter SnapWave must activate the guided animation in the 3D canvas.", "Try Lenses must go to Lenses.", "Start Free must go to Pricing or Signup.", "Create Snap Demo must create a simulated snap based on the selected option.", "Canvas hotspots must show information.", "Capture Demo must activate flash and create a snap.", "Switch Camera must change the visual view.", "Add Text must add text.", "Save Memory must save the snap.", "Preview Lens must show a preview.", "Apply Lens must apply the effect to the smartphone.", "Save Lens must change state.", "Open Story must open a vertical visual.", "React must show a reaction.", "Add to Favorites must change state.", "Pause Story must pause the bar.", "Next Story must change content.", "Reply must open a field.", "Close Story must close the viewer.", "Open Chat must open a conversation.", "Send Demo Message must add a message.", "Set Timer must change duration.", "Clear Conversation must clear the chat.", "Randomize Avatar must change the avatar.", "Save Avatar must show confirmation.", "Change Outfit must change the visual.", "Create Sticker Pack must create stickers.", "Open Map must open the map.", "Show Friends must show avatars.", "Toggle Location must change state.", "Explore Stories Nearby must show stories.", "Open Memories must open the gallery.", "Save Current Snap must save the snap.", "Search Memories must filter.", "Create Highlight must create a collection.", "Open Creator must open a profile.", "Follow must change state.", "Share must show confirmation.", "Open Group must open a panel.", "Create Group must create a group.", "Invite Friend must show confirmation.", "Open Privacy Settings must open a panel.", "Toggle Story Visibility must change state.", "Review Safety Tips must open a guide.", "Open Creator Tools must open a panel.", "Create Lens Concept must create a lens.", "View Analytics must open metrics.", "Apply as Creator must open a short form.", "Choose Plan must select a plan and show a summary.", "Start Free must go to Signup.", "FAQ must expand and collapse correctly.", "Create SnapWave Account must validate fields, checkbox and show confirmation.", "The form must validate fields and show confirmation.", "The mobile menu must open and close correctly.", "Scroll must activate 3D animations and parallax.", "All buttons must have hover, active state and visual feedback." ], "animations_3d_and_parallax": [ "On scroll, the camera must move from the smartphone toward camera, lenses, stories, story viewer, chat, avatar builder, social map, memories, discover, privacy, pricing and signup.", "The smartphone must rotate smoothly and show different screens.", "The capture button must activate flash, glowing wave and snap creation.", "Stories must appear from depth using translateZ, scale and fade.", "AR-style filters must wrap the viewfinder with particles and soft overlays.", "Chat bubbles must float, enter and visually expire with fade.", "Avatars must rotate with a subtle bounce.", "The social map must progressively draw points and connections.", "Memories must stack like vertical 3D cards.", "Stickers must float with soft rotation.", "Privacy panels must slide toggles with clear feedback.", "Pricing cards must lift with 3D hover.", "The form must appear from depth with a clean transition.", "Backgrounds, gradients, bubbles, particles, flashes, social patterns, lights and shadows must move more slowly to create depth.", "Add original soft yellow glow, electric cyan, creative violet, midnight blue, clean white, success green, soft orange for alerts, soft red for errors, clean shadows, glass reflections and a premium social app feeling.", "Avoid abrupt, fast, chaotic or distracting movement." ], "visual_style": { "description": "Social, creative, playful, premium, modern, visual, mobile-first and energetic.", "inspiration": [ "Social camera apps", "Vertical stories", "AR-style lenses", "Ephemeral chats", "Avatars", "Social maps", "Mobile experiences", "Creator interfaces", "Visual content platforms" ], "palette": [ "Original soft yellow", "Clean white", "Deep black", "Electric cyan", "Creative violet", "Midnight blue", "Success green", "Soft pink", "Soft orange for alerts", "Soft red for errors" ], "assets": [ "Glassmorphism", "Clean cards", "3D smartphone", "Vertical stories", "Chat bubbles", "Stickers", "AR-style filters", "Avatars", "Maps", "Soft shadows", "Rounded borders" ], "typography": "Modern, rounded, readable, friendly and mobile-oriented.", "feeling": "Creativity, spontaneity, connection, privacy, visual play, community, camera and personal expression." }, "expected_result": "A complete, immersive and functional landing page for “Snapchat Clone 3D”, with an original “SnapWave” identity, 3D canvas, interactive smartphone, social camera, simulated AR-style filters, stories, story viewer, simulated ephemeral chat, avatar builder, social map, memories, discover/creators, groups, privacy controls, creator tools, pricing, testimonials, FAQ, signup, functional form with fictional concept checkbox, 3D scroll animations, parallax, hotspots, functional buttons, responsive design, generous margins, clear component separation and a premium original social app aesthetic." }
Landing Pages
Twilio
clone
Twilio Clone — Communication APIs
{ "name": "SignalBridge 3D", "suggested_route": "twilio-clone", "original_brand": "SignalBridge", "objective": "Create a modern, SaaS, developer-first, immersive and functional premium landing page for a fictional and original business communication API platform, including SMS messaging, voice, transactional email, chat, notifications, OTP verification, contact center, omnichannel campaigns, automations, webhooks, virtual numbers, logs, analytics, security, integrations, documentation, pricing and signup.", "brand_note": "Create a fictional and original platform inspired by modern communication API and CPaaS platforms, without copying logos, commercial names, exact visual identity, official text, proprietary assets, official colors, documentation, product names, specific visual architecture or the exact design of Twilio or any other real brand. Use an original brand such as “SignalBridge”, “CometAPI”, “MessageGrid”, “VoiceLink Cloud” or “PulseConnect”. Keep the conceptual functionality of SMS, voice, email, verification, contact center and omnichannel communication APIs, but use completely original identity, UI, data, endpoints, numbers, messages, logs, snippets, prices and examples.", "main_concept": "The website should feel like entering a 3D global communication network where every message, call, email, OTP and conversation travels between glowing nodes. As the user scrolls, the camera moves through a digital map with cities, phones, message bubbles, delivery routes, API console, code editor, real-time logs, OTP verification, contact center, automated flows and a performance dashboard. Each section represents a product stage: connect a channel, send a message, verify a user, automate a conversation, monitor delivery, analyze results and convert visitors into registered users. Scrolling must control the camera, visual depth, parallax, route drawing, message appearance, call pulses and the transition toward signup.", "main_requirements": [ "Create a complete, modern, functional and responsive landing page.", "Include a visible 3D canvas integrated into the main experience.", "Add 3D scroll animations.", "Add parallax effects on text, global nodes, messages, phones, API console, snippets, logs, dashboards, flows, buttons, pricing and backgrounds.", "Create an experience focused on communication APIs, SMS, voice, email, chat, verification, contact center, campaigns, automations, logs, analytics, developers, integrations, security, pricing and conversion.", "All buttons must work correctly.", "Optimize for desktop, tablet and mobile.", "Use smooth, technical, trustworthy and performant animations.", "Keep the scene clear, premium, developer-friendly, scalable, organized and easy to navigate.", "Use fictional data for messages, calls, numbers, logs, endpoints, OTP codes, metrics, regions, clients, prices, campaigns and plans.", "Do not process real communications or promise guaranteed delivery, automatic legal compliance, perfect security or real availability.", "Include messages such as “demo communications only”, “fictional delivery data”, “availability and compliance depend on region and provider” and “no real messages are sent”." ], "visual_organization": { "max_width": "1200px or 1280px", "desktop_padding": "96px to 150px", "mobile_padding": "24px to 32px", "gaps": [ "24px", "32px", "48px" ], "backgrounds": [ "midnight blue", "graphite black", "clean white", "original coral red", "electric cyan", "API violet", "glassmorphism", "network grids", "connection lines", "subtle dividers" ], "rules": [ "Do not crowd messages, logs, code, forms, pricing, dashboards or 3D visuals.", "Separate each technical block with enough visual space.", "Titles must have space before and after.", "Buttons must have enough margin from text.", "Cards must have generous internal padding.", "Channel cards must clearly show name, use case, demo status, fictional latency, region, endpoint and CTA.", "Log cards must show timestamp, channel, status, message, region, fictional ID and CTA.", "Snippets must use readable monospaced typography, visual highlighting, copy button and strong contrast.", "Dashboards must be readable, with KPIs, bars, clean tables, simple charts and visual states.", "The page must feel scannable, SaaS, developer-first, premium and organized." ] }, "structure": { "header": { "logo": "SIGNALBRIDGE", "menu": [ "Home", "APIs", "Messaging", "Voice", "Verify", "Contact Center", "Pricing", "Contact" ], "buttons": [ "Start Building", "View API Demo" ], "description": "Fixed header with a light or dark translucent glassmorphism background, functional mobile hamburger menu and smooth scrolling to each section.", "microinteractions": [ "Logo with connecting nodes and a signal pulse.", "Links with animated transmission-style underline.", "Buttons with elevation, red/cyan/violet glow and visual feedback.", "Clean mobile menu transition." ] }, "hero": { "title": "Communication APIs for Messaging, Voice and Customer Engagement", "subtitle": "Send demo messages, verify users, route calls, build workflows and monitor every interaction from one programmable communication cloud.", "main_action": { "input": "What communication flow do you want to build?", "selector": "SMS / Voice / Email / Chat / OTP Verify / Notifications / Contact Center / Marketing Campaign / Webhook", "button": "Create API Flow" }, "buttons": [ "Enter Signal Network", "Try Messaging API", "Start Free" ], "background": "3D global network with connected nodes, floating messages, phones, transmission lines, API console, logs, dashboards, OTP cards, contact center and visual depth.", "visible_text": "Demo communication flows only. No real messages or calls are sent." }, "canvas_3d": { "name": "Signal Network Experience", "description": "Create a 3D scene inside a canvas representing a premium global communication API network.", "elements": [ "3D globe or node map", "Transmission lines", "SMS bubble", "3D phone", "Email card", "Chat bubble", "Voice call", "OTP verification card", "API console", "Code editor", "Logs terminal", "Webhook node", "Contact center panel", "Delivery dashboard", "Floating signup CTA" ], "main_animation": "The “Enter Signal Network” button must activate a visible animation where the camera enters the global network, selects a channel, sends a demo SMS, runs an OTP verification, triggers a webhook, updates logs, shows analytics and ends in front of the “Start Building” CTA.", "hotspots": [ "Messaging API", "Voice API", "Verify OTP", "Email Delivery", "Webhook Flow", "Contact Center", "Live Logs", "Start Building" ] }, "scroll_3d_storytelling": { "chapters": [ "Entering the global network", "Messaging APIs", "Voice", "Email", "OTP verification", "Flows and webhooks", "Contact center", "Logs and analytics", "Pricing", "Final signup" ], "transforms": [ "translateZ for depth", "scale to highlight nodes, messages, phones, snippets, logs, flows, dashboards and CTAs", "soft rotate for messages, badges, cards, nodes, phones and widgets", "fade for clean transitions", "subtle blur for distant nodes and cities", "camera movement through a communication network", "split animation to separate send, verify, route, monitor, automate and analyze" ], "parallax_layers": { "front": "Titles, buttons, CTAs, filters, prices, forms and cards.", "middle": "Nodes, messages, phones, code editor, logs, dashboards, hotspots and flows.", "background": "Global map, grids, network lines, servers, regions, particles and shadows." } }, "sections": [ { "name": "Platform Overview", "title": "Build Customer Communication Into Any Product", "description": "Explain that SignalBridge enables programmable communication experiences for notifications, authentication, support, campaigns, calls and omnichannel flows using APIs and visual tools.", "cards": [ "Programmable Messaging", "Voice & Call Routing", "User Verification", "Real-Time Logs" ] }, { "name": "Communication APIs", "channels": [ "SMS API", "Voice API", "Email API", "Chat API", "Push Notifications placeholder", "OTP Verify", "WhatsApp-style messaging placeholder", "Webhooks", "Number Management", "Contact Center" ], "fields": [ "Use case", "Fictional endpoint", "Demo status", "Simulated region", "Fictional latency" ], "buttons": [ "Open API", "Run Demo", "Copy Endpoint" ] }, { "name": "Messaging API", "elements": [ "Demo message form", "Fictional origin number", "Fictional destination number", "Channel", "Message", "Delivery status", "Logs", "Code snippet" ], "buttons": [ "Send Demo Message", "Preview Payload", "Copy Code", "View Delivery Log" ], "note": "No real message is sent." }, { "name": "Voice API", "elements": [ "Simulated call flow", "Fictional origin number", "Fictional destination number", "Call routing", "IVR menu placeholder", "Recording placeholder", "Transcription placeholder", "Call status" ], "buttons": [ "Simulate Call", "Open IVR Flow", "View Call Log", "End Demo Call" ], "note": "Do not make real calls." }, { "name": "Verify / OTP", "elements": [ "Phone/email placeholder", "Fictional OTP code", "Expiration timer", "Attempts", "Status", "Available channels" ], "buttons": [ "Send OTP Demo", "Verify Code", "Resend Code", "View Verify Logs" ], "note": "Verification is simulated and not connected to real identity." }, { "name": "Email API", "elements": [ "Subject", "Template", "Fictional recipient", "HTML preview", "Delivery status", "Fictional open/click metrics" ], "buttons": [ "Send Test Email", "Preview Template", "Copy SMTP Settings", "View Email Log" ] }, { "name": "Flow Builder", "nodes": [ "Trigger", "Send SMS", "Wait", "Verify OTP", "Send Email", "Webhook", "Route to Agent", "Success" ], "buttons": [ "Create Flow", "Add Node", "Run Flow", "View Execution" ] }, { "name": "Webhooks / Events", "elements": [ "Event types", "Fictional endpoint URL", "Retry policy placeholder", "Delivery attempts", "Signature placeholder", "Payload preview" ], "buttons": [ "Send Test Event", "Preview Payload", "View Retries", "Copy Secret" ], "note": "Copy Secret must show confirmation without revealing real secrets." }, { "name": "Contact Center", "elements": [ "Agent workspace", "Queue", "Live chat placeholder", "Voice call placeholder", "Customer profile", "Conversation history", "Routing rules", "Supervisor dashboard" ], "buttons": [ "Open Agent Desk", "Route Conversation", "Join Queue Demo", "View Supervisor Metrics" ] }, { "name": "Number Management", "elements": [ "Fictional virtual number", "Simulated country/region", "Capabilities", "Status", "Routing", "Campaign usage placeholder" ], "buttons": [ "Search Numbers", "Reserve Demo Number", "Configure Routing", "Release Number" ], "note": "Number availability is simulated." }, { "name": "Logs / Observability", "elements": [ "Timestamp", "Fictional request ID", "Channel", "Status", "Region", "Error code placeholder", "Fictional latency", "Payload preview" ], "buttons": [ "Filter Logs", "Open Request", "Retry Demo", "Export Logs" ], "style": "Dark terminal, monospaced typography and clear states." }, { "name": "Analytics Dashboard", "metrics": [ "Messages sent demo", "Fictional delivery rate", "Fictional call minutes", "Fictional OTP success rate", "Fictional email open rate", "Failed events", "Regional traffic", "Cost estimate placeholder" ], "buttons": [ "Open Analytics", "Compare Channels", "Export Report", "Add Widget" ] }, { "name": "Developer Docs / Code", "elements": [ "Quickstart", "API keys placeholder", "SDK examples", "REST endpoint", "Auth headers", "Error handling", "Rate limits placeholder" ], "buttons": [ "Open Docs", "Copy cURL", "Switch Language", "Run Sandbox" ], "languages": [ "JavaScript", "Python", "Java", "cURL" ], "note": "Do not show real keys." }, { "name": "Integrations", "integrations": [ "CRM", "Helpdesk", "Ecommerce", "Marketing automation", "Data warehouse", "Analytics", "Calendar", "Identity provider", "Webhooks", "API" ], "buttons": [ "Explore Integrations", "Connect Demo Integration", "Request Integration" ] }, { "name": "Security / Compliance", "elements": [ "API key management placeholder", "Role permissions", "Audit logs", "Data retention placeholder", "Message consent reminder", "Regional rules", "Rate limits", "Abuse prevention placeholder" ], "button": "View Security Controls", "message": "Messaging, voice, email and consent rules depend on region and provider. Review compliance before launch." }, { "name": "Use Cases", "use_cases": [ "Login verification", "Delivery notifications", "Appointment reminders", "Customer support", "Order updates", "Marketing opt-in", "Voice routing", "Incident alerts" ], "fields": [ "Problem", "Recommended flow", "Suggested channels", "Expected result" ], "button": "Explore Use Case" }, { "name": "Pricing", "plans": [ "Free Sandbox", "Developer Launch", "Growth Messaging", "Omnichannel Pro", "Enterprise Network" ], "recommended_plan": "Growth Messaging", "fields": [ "Fictional price", "Demo messages", "Voice", "Email", "OTP", "Webhooks", "Logs", "Analytics", "Support" ], "buttons": [ "Choose Plan", "Start Free" ], "note": "Prices, usage limits and fees are fictional placeholders." }, { "name": "Testimonials", "fictional_testimonials": [ "SignalBridge made our messaging workflow feel programmable and easy to monitor.", "The 3D network helped our team understand how events, logs and channels connect.", "The sandbox demo made testing OTP and notifications clear before implementation." ], "note": "Clarify that testimonials and metrics are fictional when used as a demo." }, { "name": "FAQ", "questions": [ "Is this an official Twilio website?", "Can I send real SMS or calls here?", "Can I test OTP verification?", "Can I build communication workflows?", "Can I view logs and analytics?", "Are numbers, prices and delivery rates real?", "Does this handle compliance automatically?", "Is the experience responsive on mobile?" ], "note": "Include a clear answer explaining that this is a fictional original platform with no affiliation to Twilio or any real CPaaS brand." }, { "name": "Signup / Contact", "fields": [ "Name", "Email", "Company", "Developer Role", "Main Use Case", "Preferred Channels", "Monthly Volume Range", "Plan Interest", "Message", "Consent Checkbox" ], "button": "Create SignalBridge Sandbox", "checkbox": "I understand this is a fictional communication API platform concept with simulated messages, calls, numbers, logs and pricing.", "extras": [ "Validate basic fields.", "Show a confirmation message with the request summary.", "Include a developer newsletter option and a sample API quickstart download." ] } ], "footer": { "logo": "SIGNALBRIDGE", "text": "Original fictional communication API platform concept. Not affiliated with Twilio or any real CPaaS brand.", "links": [ "Messaging", "Voice", "Email", "Verify", "Webhooks", "Contact Center", "Logs", "Docs", "Integrations", "Security", "Pricing", "Contact", "Terms", "Privacy", "Communications Disclaimer", "Social links" ] } }, "required_interactions": [ "The menu must navigate smoothly to each section.", "Enter Signal Network must activate the guided animation in the 3D canvas.", "Try Messaging API must go to Messaging API.", "Start Free must go to Pricing or Signup.", "Create API Flow must create a simulated flow based on the selected channel.", "Canvas hotspots must show information.", "Open API must open details.", "Run Demo must activate a simulated flow.", "Copy Endpoint must show confirmation.", "Send Demo Message must simulate sending without sending anything real.", "Preview Payload must open fictional JSON.", "Copy Code must show confirmation.", "View Delivery Log must open a log.", "Simulate Call must activate a simulated call.", "Open IVR Flow must open a flow.", "View Call Log must show logs.", "End Demo Call must change state.", "Send OTP Demo must generate a fictional OTP.", "Verify Code must validate the demo code.", "Resend Code must update the code.", "View Verify Logs must open logs.", "Send Test Email must simulate sending.", "Preview Template must open a view.", "Copy SMTP Settings must show confirmation.", "View Email Log must open a log.", "Create Flow must create a flow.", "Add Node must add a node.", "Run Flow must animate execution.", "View Execution must open history.", "Send Test Event must simulate an event.", "View Retries must show attempts.", "Copy Secret must show confirmation.", "Open Agent Desk must open a panel.", "Route Conversation must move the conversation.", "Join Queue Demo must create a simulated interaction.", "View Supervisor Metrics must open a dashboard.", "Search Numbers must show fictional results.", "Reserve Demo Number must reserve a simulated number.", "Configure Routing must open a panel.", "Release Number must change state.", "Filter Logs must filter.", "Open Request must open details.", "Retry Demo must simulate a retry.", "Export Logs must show confirmation.", "Open Analytics must open a panel.", "Compare Channels must show a comparison.", "Export Report must show confirmation.", "Add Widget must add a widget.", "Open Docs must open a panel.", "Copy cURL must show confirmation.", "Switch Language must switch the snippet between JavaScript, Python, Java and cURL.", "Run Sandbox must run a visual simulation.", "Explore Integrations must open a map.", "Connect Demo Integration must activate a simulated connection.", "Request Integration must open a short form.", "View Security Controls must open a panel.", "Explore Use Case must open a panel or create a demo flow.", "Choose Plan must select a plan and show a summary.", "Start Free must go to Signup.", "FAQ must expand and collapse correctly.", "Create SignalBridge Sandbox must validate fields, checkbox and show confirmation.", "The form must validate fields and show confirmation.", "The mobile menu must open and close correctly.", "Scroll must activate 3D animations and parallax.", "All buttons must have hover, active state and visual feedback." ], "animations_3d_and_parallax": [ "On scroll, the camera must move from the global network toward APIs, messaging, voice, verify, email, flow builder, webhooks, contact center, logs, analytics, docs, integrations, security, pricing and signup.", "Global nodes must connect with progressive glowing lines.", "Messages must travel between nodes using translateZ, scale and fade.", "SMS and chat bubbles must appear from depth.", "Phones must light up when a call is simulated.", "OTP must be generated as a floating card with a timer.", "Webhooks must trigger pulses between trigger/action nodes.", "Logs must update like a real-time terminal.", "Code snippets must appear with cursor and highlighting.", "Dashboards must assemble with widgets and progressive metrics.", "Integrations must connect as a cube network.", "Pricing cards must lift with 3D hover.", "The form must appear from depth with a clean transition.", "Backgrounds, global map, servers, regions, grids, particles, network lines, shadows and distant nodes must move more slowly to create depth.", "Add original coral red glow, electric cyan, midnight blue, API violet, clean white, graphite black, success green, soft yellow for warnings, soft orange for alerts, soft red for errors, clean shadows, glass reflections and a premium API platform feeling.", "Avoid abrupt, fast or chaotic movement that makes code, logs and states hard to read." ], "visual_style": { "description": "Developer-first SaaS, premium CPaaS, technical, modern, trustworthy, dynamic and enterprise-oriented.", "inspiration": [ "Communication APIs", "Global networks", "Log dashboards", "Developer consoles", "Code snippets", "Messaging", "Voice", "Email", "OTP", "Webhooks", "Contact centers", "Observability", "Cloud infrastructure" ], "palette": [ "Midnight blue", "Graphite black", "Clean white", "Original coral red", "Electric cyan", "API violet", "Cloud gray", "Success green", "Warning yellow", "Soft red for errors" ], "assets": [ "Glassmorphism", "Clean cards", "Global nodes", "Floating messages", "Phones", "Terminals", "Code", "Logs", "Flows", "Dashboards", "Network lines", "Soft shadows", "Rounded borders" ], "typography": [ "Modern, readable, professional typography oriented toward SaaS.", "Monospaced typography for snippets, logs, endpoints and payloads." ], "feeling": "Speed, connection, control, observability, security, scalability, programmable communication and trust." }, "expected_result": "A complete, immersive and functional landing page for “Twilio Clone 3D”, with an original “SignalBridge” identity, 3D canvas, global communication network, APIs, SMS demo, simulated voice, email, OTP verify, flow builder, webhooks, contact center, number management, logs, analytics, developer docs, integrations, security, use cases, pricing, testimonials, FAQ, signup, functional form with fictional concept checkbox, 3D scroll animations, parallax, hotspots, functional buttons, responsive design, generous margins, clear component separation and a premium original CPaaS platform aesthetic." }
Landing Pages
Snowflake
clone
Snowflake Clone — Data Cloud
{ "name": "CloudCrystal Data 3D", "suggested_route": "snowflake-clone", "original_brand": "CloudCrystal Data", "objective": "Create a modern, enterprise, technological, immersive and functional premium landing page for a fictional and original cloud data platform focused on data warehouse, data lakehouse, pipelines, analytics, data collaboration, security, governance, marketplace, dashboards, AI-ready data, scalability, integrations and enterprise workloads.", "brand_note": "Create a fictional and original platform inspired by modern cloud data platform concepts, without copying logos, commercial names, exact visual identity, official text, proprietary assets, visual architecture, official colors, official diagrams or the specific design of Snowflake or any other real brand. Use an original brand such as “CloudCrystal Data”, “DataNimbus”, “CrystalLake Cloud”, “QuerySphere” or “DataFrost”.", "main_concept": "The website should feel like entering a 3D data cloud made of glowing crystals, floating tables, pipelines, streams, dashboards, SQL queries, permissions, integration nodes and dataset marketplaces. As the user scrolls, the camera moves from a cold and elegant cloud into a central data core, follows pipelines between sources, enters a visual warehouse, shows SQL queries running, turns data into dashboards, activates governance, shares datasets and ends with a demo or registration CTA.", "main_requirements": [ "Create a complete, modern, functional and responsive landing page.", "Include a visible 3D canvas integrated into the main experience.", "Add 3D scroll animations.", "Add parallax effects on text, data crystals, clouds, tables, pipelines, dashboards, SQL editor, nodes, permissions, marketplace, buttons, metrics and backgrounds.", "Create an experience focused on cloud data, data warehouse, lakehouse, pipelines, analytics, SQL, governance, security, collaboration, data sharing, marketplace, AI-ready data and conversion.", "All buttons must work correctly.", "Optimize for desktop, tablet and mobile.", "Use smooth, technical, clean and performant animations.", "Keep the scene clear, premium, corporate, organized, trustworthy and easy to navigate.", "Use fictional data for datasets, queries, metrics, pipelines, clients, tables, costs, permissions, marketplace and plans.", "Do not promise guaranteed performance, security or savings.", "Use responsible language such as “simulated performance data”, “example workloads” and “review governance settings before sharing data”." ], "visual_organization": { "max_width": "1200px or 1280px", "desktop_padding": "96px to 150px", "mobile_padding": "24px to 32px", "gaps": [ "24px", "32px", "48px" ], "backgrounds": [ "ice blue", "midnight blue", "cold white", "deep black", "glassmorphism", "cloud gradients", "technical grids", "connection lines", "subtle dividers" ], "rules": [ "Do not crowd tables, dashboards, SQL code, pipelines, buttons, forms, pricing or 3D visuals.", "Separate each data block with enough visual space.", "The SQL editor must use readable monospaced typography, syntax highlighting, line numbers, a visible cursor and strong contrast.", "Dataset cards must clearly show name, source, fictional size, frequency, permissions, quality, status and CTA.", "Dashboards must be readable, with simple charts, counters, clean tables, progress bars and visual states." ] }, "structure": { "header": { "logo": "CLOUDCRYSTAL DATA", "menu": [ "Home", "Platform", "Warehouse", "Pipelines", "Analytics", "Governance", "Marketplace", "Pricing", "Contact" ], "buttons": [ "Start Free", "Book Demo" ], "description": "Fixed header with a light or dark translucent glassmorphism background, functional mobile hamburger menu and smooth scrolling to each section.", "microinteractions": [ "Logo with a glowing data crystal.", "Animated underline links.", "Buttons with elevation, ice-blue/cyan glow and visual feedback.", "Clean mobile menu transition." ] }, "hero": { "title": "A 3D Cloud Data Platform for Analytics, Sharing and Scale", "subtitle": "Unify datasets, run SQL workloads, build pipelines, govern access, share trusted data and power analytics from one cloud-native workspace.", "main_action": { "input": "What data workflow do you want to build?", "selector": "Warehouse / Lakehouse / Pipelines / Analytics / Governance / Data Sharing / Marketplace / AI Data", "button": "Generate Data Workspace" }, "buttons": [ "Enter Data Cloud", "Explore Platform", "Book Demo" ], "background": "3D data cloud with floating crystals, tables, glowing pipelines, SQL editor, dashboards, integration nodes, permissions, datasets, digital ice particles and visual depth.", "visible_text": "Example data, workloads and performance metrics are simulated." }, "canvas_3d": { "name": "Cloud Data Platform Experience", "description": "Create a 3D scene inside a canvas representing a premium enterprise data cloud.", "elements": [ "Central 3D cloud", "Data crystals", "Floating tables", "SQL editor", "Query terminal", "Glowing pipelines", "Integration nodes", "Visual warehouse", "Abstract lakehouse", "Analytics dashboards", "Dataset marketplace", "Permissions panel", "Governance shield", "Data sharing portal", "AI-ready dataset card", "Floating demo or signup CTA" ], "main_animation": "The “Enter Data Cloud” button must activate a visible animation where the camera passes through a cloud, focuses on data crystals, connects sources, runs a SQL query, transforms data into a dashboard, activates governance, shares a dataset and ends in front of the “Start Free” CTA.", "hotspots": [ "Data Warehouse", "SQL Query", "Pipelines", "Analytics Dashboard", "Governance", "Data Sharing", "Marketplace", "Start Free" ] }, "scroll_3d_storytelling": { "chapters": [ "Entering the data cloud", "Source ingestion", "Warehouse and lakehouse", "SQL queries", "Pipelines", "Analytics", "Governance", "Data sharing", "Marketplace", "Pricing and signup" ], "transforms": [ "translateZ for depth", "scale to highlight crystals, tables, SQL editor, dashboards, pipelines, marketplace and CTAs", "soft rotate for crystals, dataset cards, badges, nodes, integration cubes and widgets", "fade for clean transitions", "subtle blur for clouds and distant screens", "fly-through camera movement through a data cloud", "split animation to separate ingest, storage, compute, analytics, governance and sharing" ], "parallax_layers": { "front": "Titles, buttons, CTAs, filters, prices, metrics, labels and cards.", "middle": "Crystals, tables, pipelines, SQL editor, dashboards, hotspots, marketplace and permissions.", "background": "Clouds, grids, lights, distant screens, connection lines, particles and shadows." } }, "sections": [ { "name": "Platform Overview", "title": "Unify Your Data Cloud Without the Complexity", "description": "Explain that CloudCrystal Data helps centralize data, run analytical workloads, connect pipelines, collaborate with teams, govern access and share datasets from a visual workspace.", "cards": [ "Cloud Warehouse", "Data Pipelines", "Trusted Analytics", "Governed Sharing" ] }, { "name": "Data Sources", "fictional_sources": [ "CRM Events", "Product Analytics", "Billing Records", "Support Tickets", "Marketing Campaigns", "Web Logs", "Inventory Tables", "Finance Reports", "IoT Sensor Stream", "Customer Profiles" ], "fields": [ "Type", "Frequency", "Status", "Fictional size", "Fictional last sync", "Quality" ], "buttons": [ "Connect Source", "Preview Data", "Sync Now" ] }, { "name": "Data Warehouse", "elements": [ "Databases", "Schemas", "Tables", "Views", "Compute cluster placeholder", "Fictional storage usage", "Query history", "Workload status" ], "buttons": [ "Create Database", "Open Schema", "Run Warehouse Demo", "Scale Compute" ] }, { "name": "SQL Workspace", "elements": [ "Query editor", "Results table", "Query history", "Estimated cost placeholder", "Fictional runtime", "Row count", "Save query", "Explain plan placeholder" ], "buttons": [ "Run Query", "Format SQL", "Save Query", "Explain Plan" ] }, { "name": "Pipelines", "nodes": [ "Source", "Validate", "Transform", "Clean", "Join", "Enrich", "Load", "Monitor" ], "buttons": [ "Create Pipeline", "Add Transform", "Run Pipeline", "View Logs" ] }, { "name": "Analytics Dashboard", "metrics": [ "Revenue trend", "User growth", "Query volume", "Data freshness", "Pipeline health", "Cost trend placeholder", "Storage usage", "Data quality score" ], "buttons": [ "Open Dashboard", "Add Widget", "Export Report", "Compare Periods" ] }, { "name": "Data Governance", "elements": [ "Role-based access", "Data classification", "Audit logs", "Masking policies placeholder", "Lineage", "Access requests", "Approval flow", "Sensitive data labels" ], "buttons": [ "Open Governance", "Classify Dataset", "Review Access", "View Lineage" ], "message": "Review governance settings before sharing or exporting data." }, { "name": "Data Lineage", "elements": [ "Source tables", "Transform steps", "Derived views", "Dashboards", "Owners", "Last updated", "Quality checks" ], "buttons": [ "Generate Lineage", "Highlight Impact", "Trace Source", "Simplify Graph" ] }, { "name": "Data Sharing", "elements": [ "Shared datasets", "Partner access", "Permission levels", "Expiration date", "Usage analytics", "Approval status", "Contract note placeholder" ], "buttons": [ "Share Dataset", "Set Permissions", "Revoke Access", "View Shared Activity" ] }, { "name": "Marketplace", "categories": [ "Finance", "Retail", "Weather placeholder", "Mobility", "Marketing", "Public Data", "Product Analytics", "Benchmarking" ], "fictional_datasets": [ "Retail Demand Signals", "Market Trends Index", "Geo Mobility Sample", "Customer Sentiment Pack", "Product Usage Benchmarks", "Ad Performance Sample" ], "fields": [ "Fictional price", "Fictional provider", "Category", "Update frequency", "Quality" ], "buttons": [ "View Dataset", "Add to Workspace", "Request Access" ], "note": "Keep the marketplace simulated with no real payments." }, { "name": "AI-Ready Data", "elements": [ "Feature tables", "Vector-ready placeholder", "Training dataset placeholder", "Evaluation dataset", "Data quality checks", "Prompt context dataset", "Model monitoring placeholder" ], "buttons": [ "Prepare AI Dataset", "Run Quality Check", "Create Feature Table", "Export AI Sample" ], "note": "AI-ready workflows are simulated examples and require governance review." }, { "name": "Integrations", "integrations": [ "Cloud Storage", "BI Tool", "ETL Tool", "Reverse ETL", "Notebook", "Data Catalog", "CRM", "Product Analytics", "Security Tool", "API", "CLI", "Webhooks" ], "buttons": [ "Explore Integrations", "Connect Demo Integration", "Request Integration" ] }, { "name": "Workloads", "workloads": [ "Data Warehousing", "Data Lakehouse", "Real-Time Analytics placeholder", "BI Dashboards", "Customer 360", "Marketing Attribution", "Finance Reporting", "AI Feature Store placeholder", "Secure Data Sharing", "Data Marketplace" ], "fields": [ "Problem", "Recommended workflow", "Suggested datasets", "Expected result" ], "button": "Explore Workload" }, { "name": "Security / Admin", "elements": [ "User roles", "Workspace permissions", "Audit trails", "Data masking placeholder", "Encryption note placeholder", "Access approvals", "Private projects", "Export controls" ], "button": "View Admin Controls" }, { "name": "Pricing", "plans": [ "Free Query Lab", "Data Starter", "Analytics Pro", "Enterprise Cloud", "Global Data Network" ], "recommended_plan": "Analytics Pro", "fields": [ "Fictional price", "Storage", "Compute", "Pipelines", "Queries", "Dashboards", "Governance", "Marketplace access", "Support" ], "buttons": [ "Choose Plan", "Start Trial" ] }, { "name": "Testimonials", "fictional_testimonials": [ "CloudCrystal made complex data workflows feel visual and understandable.", "The pipeline view helped our team see where data moved and why it mattered.", "Governed sharing gave us a clearer way to collaborate with trusted datasets." ] }, { "name": "FAQ", "questions": [ "Is this an official Snowflake website?", "Can I run SQL queries?", "Can I create data pipelines?", "Can I share datasets?", "Can I use a dataset marketplace?", "Are performance metrics real?", "Can I prepare AI-ready data?", "Is the platform responsive on mobile?" ], "note": "Include a clear answer explaining that this is a fictional original platform with no affiliation to Snowflake or any real data platform brand." }, { "name": "Signup / Contact", "fields": [ "Name", "Email", "Company", "Role", "Main Data Use Case", "Data Volume Range", "Team Size", "Plan Interest", "Message", "Consent Checkbox" ], "button": "Create CloudCrystal Workspace", "checkbox": "I understand this is a fictional data platform concept with simulated data and metrics.", "extras": [ "Validate basic fields.", "Show a confirmation message with the request summary.", "Include a data engineering newsletter option and a simulated visual demo calendar." ] } ], "footer": { "logo": "CLOUDCRYSTAL DATA", "text": "Original fictional cloud data platform concept. Not affiliated with Snowflake or any real data platform brand.", "links": [ "Platform", "Warehouse", "SQL", "Pipelines", "Analytics", "Governance", "Sharing", "Marketplace", "AI Data", "Pricing", "Contact", "Terms", "Privacy", "Data Governance Note", "Social links" ] } }, "required_interactions": [ "The menu must navigate smoothly to each section.", "Enter Data Cloud must activate the guided animation in the 3D canvas.", "Explore Platform must go to Platform Overview.", "Book Demo must go to Contact or Demo.", "Generate Data Workspace must create a simulated view based on the selected workflow.", "Canvas hotspots must show information.", "Connect Source must activate a simulated connection.", "Preview Data must open a table.", "Sync Now must animate synchronization.", "Create Database must create a simulated database.", "Open Schema must open the structure.", "Run Warehouse Demo must activate a visual workload.", "Scale Compute must change simulated capacity.", "Run Query must show simulated results.", "Format SQL must format the code.", "Save Query must change state.", "Explain Plan must open a visual panel.", "Create Pipeline must create a flow.", "Add Transform must add a node.", "Run Pipeline must animate data moving.", "View Logs must open a terminal.", "Open Dashboard must open a panel.", "Add Widget must add a widget.", "Export Report must show confirmation.", "Compare Periods must show a comparison.", "Open Governance must open a panel.", "Classify Dataset must change labels.", "Review Access must open requests.", "View Lineage must show a graph.", "Generate Lineage must create a visual graph.", "Highlight Impact must highlight dependencies.", "Trace Source must show the origin.", "Simplify Graph must clean the view.", "Share Dataset must open a flow.", "Set Permissions must update the level.", "Revoke Access must change state.", "View Shared Activity must open activity.", "View Dataset must open details.", "Add to Workspace must add the dataset.", "Request Access must open a request.", "Prepare AI Dataset must create a simulated dataset.", "Run Quality Check must animate validation.", "Create Feature Table must create a visual table.", "Export AI Sample must show confirmation.", "Explore Integrations must open a map.", "Connect Demo Integration must activate a simulated connection.", "Request Integration must open a short form.", "Explore Workload must open a panel or filter modules.", "View Admin Controls must open a panel.", "Choose Plan must select a plan and show a summary.", "Start Trial must go to Signup or Contact.", "FAQ must expand and collapse correctly.", "Create CloudCrystal Workspace must validate fields, checkbox and show confirmation.", "The form must validate fields and show confirmation.", "The mobile menu must open and close correctly.", "Scroll must activate 3D animations and parallax.", "All buttons must have hover, active state and visual feedback." ], "animations_3d_and_parallax": [ "On scroll, the camera must move from the cloud toward data sources, warehouse, SQL workspace, pipelines, analytics, governance, lineage, sharing, marketplace, AI-ready data, pricing and signup.", "Data crystals must appear from depth using translateZ, scale and fade.", "Tables must float as organized panels and connect with pipelines.", "The SQL editor must highlight lines and run a query with an animated cursor.", "Results must appear as a clean 3D table.", "Pipelines must draw glowing lines between nodes.", "Data must move as particles or small cubes between source, transform and load.", "Dashboards must assemble as modular widgets.", "Lineage graphs must unfold dependencies with progressive lines.", "The governance shield must activate permissions and classification labels.", "Shared datasets must emerge as crystals protected by locks.", "The marketplace must show dataset cards floating in a 3D gallery.", "AI-ready modules must glow with subtle cyan/violet light.", "Integrations must connect with animated lines.", "Pricing cards must lift with 3D hover.", "The signup form must appear from depth with a clean transition.", "Backgrounds, clouds, grids, distant screens, connection lines, particles, lights and shadows must move more slowly to create depth.", "Avoid abrupt, fast or chaotic movements that make data and SQL hard to read." ], "visual_style": { "description": "Data-tech, enterprise SaaS, cloud-native, premium, clean, cool, technical, futuristic and trustworthy.", "inspiration": [ "Cloud data platforms", "Warehouses", "Lakehouses", "Data pipelines", "Analytics dashboards", "Data governance", "Dataset marketplaces", "SQL workspaces", "Lineage maps", "3D clouds", "Data crystals" ], "palette": [ "Ice blue", "Cold white", "Midnight blue", "Electric cyan", "Soft violet", "Success green", "Graphite gray", "Deep black", "Soft orange for alerts", "Soft red for errors" ], "assets": [ "Glassmorphism", "Clean cards", "3D crystals", "Floating tables", "Clouds", "Glowing pipelines", "Dashboards", "Connected nodes", "Governance shields", "Soft shadows", "Rounded borders" ], "typography": [ "Modern, readable, technical typography oriented toward enterprise products.", "Monospaced typography for SQL and logs." ], "feeling": "Clarity, scalability, trusted data, control, governance, collaboration, automation, analytics and enterprise cloud." }, "expected_result": "A complete, immersive and functional landing page for “Snowflake Clone 3D”, with an original “CloudCrystal Data” identity, 3D canvas, data cloud, crystals, data warehouse, SQL workspace, pipelines, analytics dashboards, governance, lineage, data sharing, marketplace, AI-ready data, integrations, workloads, security, pricing, testimonials, FAQ, signup, functional form with fictional concept checkbox, 3D scroll animations, parallax, hotspots, functional buttons, responsive design, generous margins, clear component separation and a premium original cloud data platform aesthetic." }
Landing Pages
Target
clone
Target Clone — Expect More
{ "name": "BrightCart 3D", "suggested_original_brand": "BrightCart", "suggested_route": "target-clone", "objective": "Create a premium, modern, retail, immersive, family-friendly, commercial and functional landing page for a fictional and original online shopping platform inspired by a large department store, featuring product categories, deals, a 3D store, cart, search, filters, recommendations, fictional private-label brands, pickup, delivery, wishlist, promotions, rewards program, user account, order tracking, simulated checkout and customer support.", "brand_note": "Create a fictional and original platform inspired by modern retail stores and general ecommerce experiences, without copying logos, commercial names, exact visual identities, official text, proprietary assets, official colors, mascots, exact layouts, campaigns, real products, real brands or the specific design of Target or any other real brand. Use an original brand such as “BrightCart”, “ShopNest”, “MarketLoop”, “AisleOne” or “RedBasket”. Preserve the conceptual functionality of a department store, categories, deals, pickup, delivery and cart, but with completely original identity, UI, products, promotions, text, iconography and examples.", "main_concept": "The website should feel like entering a bright, organized and modern 3D retail store, where each category appears as a floating aisle and each product is presented with a clear and attractive card. As the user scrolls, the camera moves through the store entrance, home, fashion, electronics, beauty, toys, grocery, seasonal, deals, cart, checkout and membership aisles. Scroll must control the camera, visual depth, parallax, product movement, price tag appearance, cart movement, box opening, coupon activation and the transition toward a simulated purchase or registration.", "main_requirements": [ "Create a complete, modern, functional and responsive landing page.", "Include a visible 3D canvas integrated into the main experience.", "Add 3D scroll animations.", "Add parallax effects on text, store, aisles, products, shelves, cart, coupons, bags, boxes, categories, buttons, prices and backgrounds.", "Create an experience focused on retail, ecommerce, categories, deals, cart, checkout, pickup, delivery, wishlist, rewards, account, support and conversion.", "All buttons must work correctly.", "Optimize for desktop, tablet and mobile.", "Use smooth, commercial, clean and performant animations.", "Keep the scene clear, premium, trustworthy, family-friendly, organized and easy to navigate.", "Use generous margins, clear separation between sections and strong visual hierarchy.", "Avoid visual clutter: the page must feel cheerful, scannable, modern, safe and ready for shopping.", "Use fictional data for products, prices, discounts, availability, stores, deliveries, coupons, reviews, categories, plans and orders.", "Do not promise real availability, real prices, real discounts, guaranteed deliveries or affiliation with real brands.", "Include visible messages such as “demo shopping experience”, “fictional products and prices”, “availability is simulated” and “checkout is not a real payment flow”." ], "visual_organization": { "max_width": "1200px or 1280px", "desktop_padding": "96px to 150px per section", "mobile_padding": "24px to 32px", "gaps": "24px, 32px or 48px", "backgrounds": [ "clean white", "original coral red", "warm cream", "midnight blue", "soft gray", "glassmorphism blocks", "retail gradients", "aisle lines", "deal tags", "subtle dividers" ], "rules": [ "Do not crowd products, prices, banners, coupons, buttons, forms, checkout or 3D visuals.", "Separate each retail block with enough visual space.", "Titles must have space before and after.", "Buttons must have enough margin from text.", "Cards must have generous internal padding.", "Product cards must clearly show name, category, fictional price, fictional discount, fictional rating, simulated availability, pickup/delivery option and CTA.", "Category cards must show icon, description, fictional product count, featured deal and CTA.", "The cart must show products, quantities, subtotal, coupons, pickup/delivery, tax placeholder, demo total and clear buttons.", "The page must feel scannable, retail-tech, premium and organized." ] }, "structure": { "header": { "logo": "BRIGHTCART", "menu": [ "Home", "Categories", "Deals", "New Arrivals", "Pickup", "Rewards", "FAQ", "Contact" ], "buttons": [ "Shop Deals", "Open Cart" ], "description": "Fixed header with a light or dark translucent glassmorphism background, functional mobile hamburger menu and smooth scrolling to each section.", "microinteractions": [ "Logo with a minimal shopping cart and a deal star that appears softly.", "Animated underline links.", "Buttons with elevation, coral red/cyan/green glow and visual feedback.", "Clean mobile menu transition." ] }, "hero": { "title": "Shop Everyday Finds in a 3D Retail Store Experience", "subtitle": "Explore fictional deals, curated categories, pickup options, delivery choices and a smooth demo checkout inside an immersive shopping destination.", "search": { "input": "Search products, categories or deals", "selector": "Home / Fashion / Electronics / Beauty / Grocery / Toys / Seasonal / Baby / Sports / Office", "button": "Search BrightCart" }, "buttons": [ "Enter Store", "Browse Deals", "Start Shopping" ], "background": "3D store with bright entrance, aisles, shelves, floating cart, bags, boxes, discount tags, products, checkout screen, pickup counter, soft particles and visual depth.", "visible_text": "Fictional products, prices and checkout demo only." }, "canvas_3d": { "name": "Retail Store Experience", "description": "Create a 3D scene inside a canvas representing a premium and immersive retail store.", "elements": [ "3D store entrance", "Category aisles", "Shelves with fictional products", "3D shopping cart", "Shopping bags", "Delivery boxes", "Price tags", "Floating coupons", "Pickup counter", "Delivery zone", "Checkout screen", "Wishlist board", "Rewards card", "Floating shopping CTA" ], "lighting": "Red, coral, cyan and white lights, clean shadows, glassmorphism and visual depth.", "main_animation": "The “Enter Store” button must activate a visible animation where the camera enters the store, moves through aisles, focuses on a deal, selects a product, adds it to the cart, applies a coupon, chooses pickup, opens the demo checkout and ends in front of the “Start Shopping” CTA.", "hotspots": [ "Featured Deal", "Categories", "Product Shelf", "Cart", "Pickup Counter", "Delivery", "Rewards", "Start Shopping" ] }, "scroll_3d_storytelling": { "chapters": [ "Store entrance", "Categories", "Featured deals", "Popular products", "New arrivals", "Cart", "Pickup and delivery", "Rewards", "Checkout demo", "Final registration" ], "transforms": [ "translateZ for depth", "scale to highlight products, shelves, cart, coupons, boxes, bags, checkout and CTAs", "soft rotate for tags, boxes, product cards, coupons, badges and bags", "fade for clean transitions", "subtle blur for distant aisles", "smooth camera movement through a premium store", "split animation to separate browse, deal, cart, pickup, delivery and checkout" ], "parallax_layers": { "front": "Titles, buttons, CTAs, filters, prices, coupons, forms and cards.", "middle": "Products, cart, shelves, bags, boxes, hotspots and checkout.", "background": "Aisles, lights, signage, retail grids, store walls, particles and shadows." } }, "sections": [ { "name": "Platform Overview", "title": "Everything You Need for Everyday Shopping", "description": "Explain that BrightCart lets users explore categories, discover fictional deals, save favorites, choose pickup or delivery, apply demo coupons and complete a simulated checkout.", "cards": [ "Curated Categories", "Daily Demo Deals", "Pickup & Delivery", "Rewards Experience" ] }, { "name": "Categories", "categories": [ "Home & Living", "Fashion Basics", "Electronics", "Beauty", "Grocery", "Toys", "Baby", "Sports", "Office", "Seasonal" ], "fields": [ "Description", "Fictional product count", "Featured deal", "Badge" ], "buttons": [ "Open Category", "View Deals", "Save Category" ], "visual": "Categories must appear as 3D aisles with clear signage." }, { "name": "Featured Deals", "fictional_deals": [ "Cozy Home Starter Kit", "Smart Desk Bundle", "Everyday Beauty Set", "Family Snack Pack", "Kids Creative Box", "Weekend Fitness Kit", "Back-to-Work Essentials", "Seasonal Decor Pack" ], "fields": [ "Fictional price", "Fictional previous price", "Fictional discount", "Category", "Simulated availability", "Fictional rating" ], "buttons": [ "View Deal", "Add to Cart", "Save Deal" ] }, { "name": "Products", "fictional_products": [ "Soft Cotton Throw", "Urban Travel Mug", "Glow Desk Lamp", "Everyday Sneakers", "Mini Bluetooth Speaker", "Fresh Market Tote", "Hydrating Skin Set", "Wooden Toy Blocks", "Smart Notebook", "Ceramic Dinner Set", "Cozy Pet Bed", "Workout Resistance Kit" ], "fields": [ "Category", "Fictional price", "Fictional rating", "Simulated stock", "Options: pickup, delivery, shipping", "Badge: new, deal, popular, limited, online only" ], "buttons": [ "Open Product", "Add to Cart", "Add to Wishlist", "Compare" ] }, { "name": "Product Detail", "elements": [ "3D gallery or placeholder image", "Name", "Category", "Fictional price", "Description", "Variants", "Fictional rating", "Fictional reviews", "Pickup/delivery/shipping", "Policy placeholder", "Similar products" ], "buttons": [ "Add to Cart", "Buy Demo", "Save for Later", "Share Product" ] }, { "name": "Cart", "elements": [ "Product list", "Quantities", "Subtotal", "Coupon", "Pickup/delivery", "Tax placeholder", "Demo total" ], "buttons": [ "Update Quantity", "Apply Coupon", "Remove Item", "Checkout Demo" ], "description": "The cart must be clear, responsive and optionally persistent as a mini cart." }, { "name": "Pickup & Delivery", "elements": [ "Store pickup", "Curbside pickup placeholder", "Same-day delivery placeholder", "Standard shipping placeholder", "Fictional store selector", "Fictional time window", "Delivery address placeholder" ], "buttons": [ "Select Pickup", "Choose Delivery", "Change Store", "Check Availability" ], "note": "Availability and delivery windows are simulated." }, { "name": "New Arrivals", "fictional_products": [ "Spring Kitchen Collection", "Modern Bath Essentials", "Travel Tech Minis", "Kids Art Corner", "Fresh Activewear Drop", "Outdoor Picnic Set" ], "fields": [ "Category", "Fictional date", "Starting price", "Mood" ], "buttons": [ "Explore Drop", "Add Favorite" ] }, { "name": "Wishlist", "elements": [ "Saved products", "Saved deals", "Saved categories", "Price drop placeholder", "Reminder" ], "buttons": [ "Open Wishlist", "Move to Cart", "Remove Saved", "Share Wishlist" ] }, { "name": "Rewards", "elements": [ "Demo points", "Member tier", "Birthday perk placeholder", "Exclusive deals", "Fictional cashback placeholder", "Purchase history" ], "buttons": [ "Join Rewards", "Redeem Points", "View Perks", "Apply Member Deal" ], "note": "Rewards, points and discounts are fictional." }, { "name": "Checkout Simulation", "steps": [ "Cart review", "Fulfillment method", "Customer details", "Payment placeholder", "Order review", "Confirmation" ], "fields": [ "Name", "Email", "Delivery or pickup option", "Address placeholder", "Notes", "Consent Checkbox" ], "buttons": [ "Continue Checkout", "Review Order", "Place Demo Order" ], "note": "This is not a real payment or order flow." }, { "name": "Order Tracking", "elements": [ "Order placed", "Preparing", "Ready for pickup", "Out for delivery", "Delivered", "Receipt" ], "buttons": [ "Track Order", "View Receipt", "Contact Support" ] }, { "name": "Seasonal Collections", "collections": [ "Back to School", "Holiday Home", "Summer Essentials", "Cozy Winter", "Spring Refresh", "Weekend Hosting" ], "fields": [ "Description", "Featured products", "Starting price" ], "buttons": [ "Open Collection", "Shop Collection" ] }, { "name": "Support", "elements": [ "Order help", "Returns placeholder", "Delivery help", "Account help", "Product questions", "Store pickup help" ], "buttons": [ "Open Help Center", "Start Chat Demo", "Request Return Demo", "Send Support Message" ] }, { "name": "Pricing / Membership", "plans": [ "Free Shopper", "Bright Rewards", "Family Plus", "Delivery Saver", "Premium Household" ], "recommended_plan": "Bright Rewards", "fields": [ "Fictional price", "Deals", "Rewards", "Pickup", "Delivery perks", "Wishlist", "Support", "Seasonal offers" ], "buttons": [ "Choose Plan", "Start Free" ] }, { "name": "Testimonials", "fictional_testimonials": [ "BrightCart made browsing deals feel like walking through a clean 3D store.", "The cart, pickup and checkout demo were clear, fast and easy to understand.", "The category aisles made everyday shopping feel more visual and organized." ] }, { "name": "FAQ", "questions": [ "Is this an official Target website?", "Are the products and prices real?", "Can I place a real order?", "Can I choose pickup or delivery?", "Can I save products to a wishlist?", "Are rewards and coupons real?", "Is the experience responsive on mobile?" ], "note": "Include a clear answer explaining that this is a fictional original platform with no affiliation to Target or any real retail brand." }, { "name": "Signup / Contact", "fields": [ "Name", "Email", "Preferred Store", "Favorite Category", "Shopping Style", "Fulfillment Preference", "Plan Interest", "Message", "Consent Checkbox" ], "button": "Create BrightCart Account", "checkbox": "I understand this is a fictional retail platform concept with simulated products, prices, rewards and checkout.", "extras": [ "Validate basic fields.", "Show a confirmation message with request summary.", "Include an offers newsletter option and a sample shopping checklist download." ] } ], "footer": { "logo": "BRIGHTCART", "text": "Original fictional retail platform concept. Not affiliated with Target or any real retail brand.", "links": [ "Categories", "Deals", "Products", "Pickup", "Delivery", "Wishlist", "Rewards", "Checkout Demo", "Support", "Pricing", "Contact", "Terms", "Privacy", "Shopping Disclaimer", "Social links" ] } }, "required_interactions": [ "The menu must navigate smoothly to each section.", "Enter Store must activate the guided animation in the 3D canvas.", "Browse Deals must go to Deals.", "Start Shopping must go to Products or Categories.", "Search BrightCart must filter or show simulated results.", "Canvas hotspots must show information.", "Open Category must open a listing.", "View Deals must filter deals.", "Save Category must change state.", "View Deal must open details.", "Add to Cart must add a product and update the cart.", "Save Deal must change state.", "Open Product must open details.", "Add to Wishlist must change state.", "Compare must open a comparison view.", "Buy Demo must go to checkout.", "Save for Later must change state.", "Share Product must show confirmation.", "Update Quantity must update the total.", "Apply Coupon must apply a fictional discount.", "Remove Item must remove the product.", "Checkout Demo must go to checkout.", "Select Pickup must change method.", "Choose Delivery must change method.", "Change Store must open a selector.", "Check Availability must show simulated availability.", "Explore Drop must open a collection.", "Add Favorite must change state.", "Open Wishlist must open a panel.", "Move to Cart must add to cart.", "Remove Saved must remove the item.", "Share Wishlist must show confirmation.", "Join Rewards must change state.", "Redeem Points must apply a demo discount.", "View Perks must open a panel.", "Apply Member Deal must apply a deal.", "Continue Checkout must advance the step.", "Review Order must show a summary.", "Place Demo Order must validate fields and show confirmation.", "Track Order must animate progress.", "View Receipt must open a receipt.", "Contact Support must go to support or a form.", "Open Collection must open details.", "Shop Collection must filter products.", "Open Help Center must open a panel.", "Start Chat Demo must open a simulated chat.", "Request Return Demo must open a flow.", "Send Support Message must validate the message and show confirmation.", "Choose Plan must select a plan and show a summary.", "Start Free must go to Signup.", "FAQ must expand and collapse correctly.", "Create BrightCart Account must validate fields, checkbox and show confirmation.", "The form must validate fields and show confirmation.", "The mobile menu must open and close correctly.", "Scroll must activate 3D animations and parallax.", "All buttons must have hover, active state and visual feedback." ], "animations_3d_and_parallax": [ "On scroll, the camera must move from the store entrance toward categories, deals, products, detail, cart, pickup, delivery, rewards, checkout, tracking, support, membership and signup.", "Aisles must move with depth like a real store.", "Products must appear from depth using translateZ, scale and fade.", "Deal tags must enter with soft rotation and controlled glow.", "The cart must slowly move through the aisle when products are added.", "Boxes must open with soft microanimation.", "Coupons must float and visually apply to the total.", "The pickup/delivery selector must change the scene between counter and delivery zone.", "Checkout must advance through steps as modular cards.", "Tracking must progressively light up stages.", "Membership cards must lift with 3D hover.", "The form must appear from depth with a clean transition.", "Backgrounds, aisles, lights, signage, distant shelves, boxes, particles, retail grids and shadows must move more slowly to create depth.", "Avoid abrupt, fast, chaotic movements or anything that makes prices and products hard to read." ], "visual_style": { "description": "Premium retail, modern ecommerce, clean, family-friendly, cheerful, trustworthy, aspirational and functional.", "inspiration": [ "Modern department stores", "General ecommerce", "Store aisles", "Product cards", "Pickup counters", "Delivery flows", "Rewards", "Shopping carts", "Deals", "Seasonal collections", "Mobile-first experiences" ], "palette": [ "Clean white", "Original coral red", "Warm cream", "Midnight blue", "Soft gray", "Electric cyan", "Success green", "Soft gold for deals", "Soft orange for alerts", "Soft red for errors" ], "assets": [ "Soft glassmorphism", "Clean cards", "3D store", "Aisles", "Shelves", "Products", "Cart", "Boxes", "Bags", "Tags", "Coupons", "Simple dashboards", "Soft shadows", "Rounded borders" ], "typography": "Modern, readable, friendly typography oriented toward ecommerce.", "feeling": "Discovery, savings, order, ease of shopping, trust, home, convenience, pickup, delivery and a modern retail experience." }, "expected_result": "A complete, immersive and functional landing page for “Target Clone 3D”, with an original “BrightCart” identity, 3D canvas, interactive retail store, categories, deals, fictional products, product detail, cart, pickup, delivery, new arrivals, wishlist, rewards, simulated checkout, order tracking, seasonal collections, support, membership, testimonials, FAQ, signup, functional form with fictional concept checkbox, 3D scroll animations, parallax, hotspots, functional buttons, responsive design, generous margins, clear component separation and a premium original retail marketplace aesthetic." }
Landing Pages
Crunchyroll
clone
Crunchyroll Clone — Anime streaming
{ "name": "Crunchyroll Clone 3D", "suggested_original_brand": "AnimeVerse 3D", "suggested_route": "crunchyroll-clone", "objective": "Create a premium, modern, immersive, dynamic and functional landing page for a fictional and original anime-inspired streaming platform featuring animated series, movies, simulcasts, watchlists, rankings, fan communities, release calendars, premium plans and a simulated playback experience.", "brand_note": "Create a fictional and original platform inspired by anime streaming services, without copying logos, commercial names, exact visual identities, protected characters, real covers, real series, official images or proprietary assets from Crunchyroll or any other franchise. Use an original brand such as “AnimeVerse 3D”, “NeoAnime Hub” or “OtakuStream”, with fully fictional series, characters, thumbnails and worlds.", "main_concept": "The website should feel like entering a 3D anime streaming universe. As the user scrolls, the camera moves through a digital lobby with giant screens, fictional posters, floating series cards, genre portals, simulcast rooms, a release calendar, central player, rankings, watchlist, fan avatars, neon lights, particles, energy effects and a final CTA to start a free trial.", "main_requirements": [ "Create a complete, modern, functional and responsive landing page.", "Include a visible 3D canvas integrated into the main experience.", "Add 3D scroll animations.", "Add parallax effects on text, screens, anime cards, posters, episodes, buttons, portals, particles, lights, avatars, players and backgrounds.", "Create an experience focused on anime streaming, catalog browsing, simulcasts, playback, watchlists, community, premium plans and conversion.", "All buttons must work correctly.", "Optimize for desktop, tablet and mobile.", "Use smooth, energetic, colorful and performant animations.", "Keep the scene clear, premium, organized, fun and easy to navigate.", "Avoid copying protected brands, characters or designs; everything must be fictional, original and legally usable." ], "visual_organization": { "max_width": "1200px or 1280px", "desktop_padding": "96px to 140px per section", "mobile_padding": "24px to 32px", "gaps": "24px, 32px or 48px", "backgrounds": [ "neon gradients", "dark glassmorphism blocks", "futuristic grids", "energy lines", "subtle visual dividers" ], "cards": "Series cards must clearly show title, genre, season, rating, status, duration and CTA.", "players": "Players must include visible controls, a progress bar and functional states." }, "structure": { "header": { "logo": "ANIMEVERSE 3D", "menu": [ "Home", "Catalog", "Simulcast", "Movies", "Watchlist", "Community", "Pricing", "Contact" ], "buttons": [ "Start Free Trial", "Browse Anime" ], "description": "Fixed header with a dark translucent glassmorphism background, functional mobile hamburger menu and smooth scrolling to each section.", "microinteractions": [ "Logo with orange/cyan anime energy glow", "Animated underline links", "Buttons with elevation, neon glow and visual feedback", "Clean mobile menu transition" ] }, "hero": { "title": "Stream Anime Worlds Inside an Immersive 3D Platform", "subtitle": "Discover original anime series, simulcasts, movies, rankings, watchlists and fan-powered recommendations through a cinematic 3D streaming experience.", "buttons": [ "Enter AnimeVerse", "Browse Catalog", "Start Free Trial" ], "background": "3D streaming universe with giant screens, fictional posters, episode cards, genre portals, floating player, fan avatars, energy particles, neon lights, stylized night city and visual depth." }, "canvas_3d": { "name": "Anime Streaming Experience", "description": "Create a 3D scene inside a canvas representing a futuristic anime streaming platform.", "elements": [ "Digital streaming lobby", "Giant main screen", "Floating 3D player", "Fictional series posters", "Episode cards", "Recommendation carousel", "Genre portals", "Simulcast calendar", "Ranking board", "Floating watchlist", "User avatars", "Premium badges", "Subtitle and dub icons", "Remote control or gamepad", "Floating free trial CTA" ], "hotspots": [ "Featured Anime", "Video Player", "Simulcast Calendar", "Genre Portals", "Top Rankings", "Watchlist", "Premium Plan", "Start Free Trial" ], "main_animation": "The “Enter AnimeVerse” button must trigger an animation where the camera enters the lobby, moves closer to the player, shows a featured series, opens a carousel, passes through the simulcast calendar and ends in front of the registration CTA." }, "sections": [ { "name": "Platform Overview", "title": "A Streaming Hub for Anime Fans", "description": "Explain that the platform lets users discover original series, watch episodes, follow simulcasts, create watchlists, explore genres, receive recommendations, join the community and access premium plans.", "cards": [ "Original Anime Catalog", "Simulcast Releases", "Personal Watchlist", "Fan Community" ] }, { "name": "Featured Anime", "fictional_title": "Starblade Academy", "genre": "Action, fantasy, school adventure", "elements": [ "Season", "Fictional rating", "Short synopsis", "Badges: subtitled, dubbed, premium, new episode" ], "buttons": [ "Watch Trailer", "Start Watching", "Add to Watchlist" ] }, { "name": "Catalog", "fictional_series": [ "Starblade Academy", "Moonlight Rangers", "Cyber Sakura Unit", "Dragon Harbor", "Neon Spirit Club", "Mecha Garden Zero", "Crystal Fox Chronicles", "Skybound Bento", "Shadow Library", "Pixel Samurai Days" ], "fields": [ "Fictional poster", "Genre", "Seasons", "Episodes", "Rating", "Status: new, popular, completed, simulcast" ], "buttons": [ "View Series", "Play Episode", "Add to Watchlist" ] }, { "name": "Video Player", "elements": [ "Video screen", "Episode title", "Play/Pause", "Progress bar", "Volume", "Subtitles toggle", "Dub/Sub selector", "Quality selector", "Fullscreen button", "Next episode", "Skip intro" ], "buttons": [ "Play", "Pause", "Skip Intro", "Next Episode", "Add to Watchlist" ] }, { "name": "Simulcast Calendar", "episodes": { "Monday": "Cyber Sakura Unit EP 08", "Tuesday": "Dragon Harbor EP 12", "Wednesday": "Starblade Academy EP 04", "Thursday": "Shadow Library EP 09", "Friday": "Mecha Garden Zero EP 06", "Saturday": "Neon Spirit Club EP 10", "Sunday": "Crystal Fox Chronicles EP 03" }, "fields": [ "Fictional time", "Status", "Sub/Dub" ], "buttons": [ "Notify Me", "Open Episode" ] }, { "name": "Genres", "genres": [ "Action", "Fantasy", "Romance", "Comedy", "Sci-Fi", "Slice of Life", "Adventure", "Mystery", "Sports", "Supernatural" ], "button": "Explore Genre" }, { "name": "Rankings", "lists": [ "Top this week", "Most watched", "New releases", "Fan favorites", "Hidden gems" ], "fields": [ "Position", "Title", "Genre", "Rating", "Fictional view count" ], "buttons": [ "Watch", "Compare" ] }, { "name": "Watchlist", "elements": [ "Saved series", "Pending episodes", "Progress", "Last watched episode", "Next release" ], "buttons": [ "Continue Watching", "Remove", "Sort Watchlist" ] }, { "name": "Recommendations", "types": [ "Based on your watchlist", "Trending now", "Because you watched fantasy", "New simulcast for you", "Short episodes", "Weekend binge" ], "buttons": [ "Play Recommendation", "Not Interested" ] }, { "name": "Community", "elements": [ "Watch parties", "Episode discussions", "Fan polls", "Reviews", "Badges", "Clubs by genre" ], "buttons": [ "Join Watch Party", "Open Discussion", "Vote in Poll", "Join Club" ] }, { "name": "Movies", "fictional_movies": [ "The Last Comet Shrine", "Garden of Neon Winds", "Samurai Cloud Express", "The Fox and the Moon Engine", "Midnight Bento Journey" ], "buttons": [ "Watch Movie", "Add to List" ] }, { "name": "Premium Features", "benefits": [ "Ad-free watching", "Offline downloads placeholder", "Early access episodes", "Multiple profiles", "HD / 4K streaming placeholder", "Watch parties", "Exclusive badges", "Priority support" ], "button": "Unlock Premium" }, { "name": "Pricing", "plans": [ "Free", "Fan", "Mega Fan", "Family Stream", "Ultimate Collector" ], "recommended_plan": "Mega Fan", "fields": [ "Fictional price", "Streaming quality", "Ads or ad-free", "Profiles", "Devices", "Watch parties", "Offline downloads placeholder", "Support" ], "buttons": [ "Choose Plan", "Start Free Trial" ] }, { "name": "Signup", "fields": [ "Name", "Email", "Username", "Favorite Genre", "Plan Interest", "Preferred Language", "Message optional" ], "button": "Create AnimeVerse Account", "extras": [ "Validate basic fields", "Show confirmation message with registration summary", "Include newsletter option for simulcasts and releases" ] }, { "name": "FAQ", "questions": [ "Can I watch trailers?", "Can I create a watchlist?", "Can I follow simulcast releases?", "Can I switch subtitles and dubbed audio?", "Are the anime titles fictional?", "Can I join watch parties?", "Is the platform responsive on mobile?" ] }, { "name": "Contact / Support", "fields": [ "Name", "Email", "Inquiry Type", "Account / Streaming / Pricing / Community", "Subject", "Message" ], "button": "Contact Support", "fictional_data": [ "Email", "Support hours", "Community guidelines link", "Legal content note", "Social links" ] } ], "footer": { "logo": "ANIMEVERSE 3D", "links": [ "Catalog", "Simulcast", "Movies", "Watchlist", "Community", "Pricing", "Support", "Terms", "Privacy", "Content Guidelines", "Social links" ] } }, "required_interactions": [ "The menu must navigate smoothly to each section.", "Enter AnimeVerse must activate a guided animation in the 3D canvas.", "Browse Catalog must go to Catalog.", "Start Free Trial must go to Pricing or Signup.", "Canvas hotspots must show information.", "Watch Trailer must open a player modal.", "Start Watching must activate the player or go to Player.", "Add to Watchlist must change state to saved.", "View Series must open details.", "Play Episode must open the player.", "Play, Pause, Skip Intro and Next Episode must change the player state.", "Notify Me must change state to active reminder.", "Open Episode must open details.", "Explore Genre must filter the catalog or focus the 3D portal.", "Watch must open the player.", "Compare must add the series to a comparison view.", "Continue Watching must open the player.", "Remove must remove the series from the watchlist.", "Sort Watchlist must reorganize cards.", "Play Recommendation must open the player.", "Not Interested must hide the card.", "Join Watch Party must open a panel.", "Open Discussion must open a conversation.", "Vote in Poll must register a visual vote.", "Join Club must change state to joined.", "Watch Movie must open the player.", "Add to List must add to watchlist.", "Unlock Premium must go to Pricing.", "Choose Plan must select a plan and show a summary.", "Create AnimeVerse Account must validate fields and show confirmation.", "FAQ must expand and collapse correctly.", "Contact Support must validate fields and show confirmation.", "The mobile menu must open and close correctly.", "All buttons must have hover, active state and visual feedback." ], "animations_3d_and_parallax": [ "The camera must move from the main lobby toward featured series, player, catalog, simulcast, genres, rankings, watchlist, community, pricing and signup.", "Anime cards must appear from depth using translateZ, scale and fade.", "Posters must float with soft rotation and subtle glow.", "Genre portals must light up progressively.", "The main screen must change trailer, episode and ranking content according to scroll.", "The player must animate progress bar, subtitles and controls.", "The simulcast calendar must reveal episodes as floating cards.", "Rankings must reorganize with smooth transitions.", "Recommendations must enter as 3D carousels.", "Community avatars must float with micro movement.", "Premium badges must rotate slightly with reflections.", "Pricing cards must lift with 3D hover.", "The signup form must appear from depth with a clean transition." ], "visual_style": { "description": "Anime-inspired, modern, premium, technological, energetic, clean, social and cinematic.", "inspiration": [ "Streaming platforms", "Anime catalogs", "Entertainment launch pages", "OTT interfaces", "Fan communities", "Simulcast calendars", "Neon UI", "Giant screens", "Stylized night cities", "3D content experiences" ], "palette": [ "Deep black", "Midnight blue", "Bright orange", "Electric cyan", "Neon violet", "Soft magenta", "Cool white", "Graphite gray", "Success green for confirmations", "Soft gold for premium plans" ], "assets": [ "Dark glassmorphism", "Clean cards", "Fictional posters", "3D screens", "Neon lights", "Portals", "Badges", "Avatars", "Soft shadows", "Rounded borders" ], "typography": "Modern, bold, readable typography with youthful energy." }, "expected_result": "A complete, immersive and functional landing page for “Crunchyroll Clone 3D”, with a 3D canvas, fictional anime streaming platform, digital lobby, catalog, featured series, player, simulcast calendar, genres, rankings, watchlist, recommendations, community, movies, premium features, pricing, signup, FAQ, support, functional form, 3D scroll animations, parallax, hotspots, functional buttons, responsive design, generous margins, clear component separation and a premium anime streaming aesthetic." }
Landing Pages
Substack
clone
Substack Clone — Newsletters
{ "name": "LetterNest 3D", "suggested_route": "substack-clone", "objective": "Create a premium, modern, editorial, immersive, elegant, functional and responsive landing page for an original fictional publishing platform focused on newsletters, independent publications, blogs, essays, podcasts, reader communities, subscriptions, memberships, authors, simulated monetization, analytics, text editing, publication archives, recommendations and audience growth.", "brand_note": "Create an original fictional platform inspired by modern publishing and newsletter tools, without copying logos, commercial names, exact visual identities, official copy, proprietary assets, protected interfaces, official colors, specific visual structures or exact designs from Substack or any other real brand. Use an original brand such as LetterNest, EssayCloud, WriterLoop, InkSignal or PublishRoom.", "main_concept": "The website should feel like entering a 3D editorial library where ideas transform into letters, pages, newsletters, essays and living communities. As the user scrolls, the camera moves through a space with author desks, floating pages, glowing envelopes, digital shelves, post cards, writer profiles, a minimalist editor, subscriber panels, analytics, comments, podcasts and a final registration area.", "main_requirements": [ "Create a complete, modern, functional and responsive landing page.", "Include a visible 3D canvas integrated into the main experience.", "Add 3D scroll animations.", "Add parallax effects on text, letters, pages, newsletters, desks, books, editor, authors, posts, comments, analytics, buttons, pricing and backgrounds.", "Create an experience focused on editorial publishing, newsletters, writers, readers, subscriptions, community, podcasts, editor, archive, analytics, simulated monetization and conversion.", "All buttons must work correctly.", "Optimize for desktop, tablet and mobile.", "Use smooth, editorial, warm and performant animations.", "Use fictional data for publications, authors, readers, subscribers, revenue, pricing, comments, podcasts and metrics.", "Do not promise guaranteed revenue, automatic growth or real audiences.", "Include visible messages such as: fictional creator data, demo publishing flow and subscriber growth depends on audience, consistency and content quality." ], "visual_organization": { "max_width": "1200px or 1280px", "desktop_padding": "96px to 150px per section", "mobile_padding": "24px to 32px", "gaps": "24px, 32px or 48px", "backgrounds": [ "paper cream", "ink black", "editorial white", "sage green", "warm orange", "midnight blue", "glassmorphism blocks", "paper textures", "writing lines", "editorial grids", "subtle dividers" ], "publication_cards": "Publication cards must clearly show title, fictional author, category, reading time, date, access type, excerpt and CTA.", "author_cards": "Author cards must show name, topic, bio, fictional subscribers, main publication and CTA.", "editor": "The editor must have readable typography, a minimalist style, clear toolbar, save state, preview and publishing buttons." }, "structure": { "header": { "logo": "LETTERNEST", "menu": [ "Home", "Discover", "Write", "Newsletters", "Community", "Analytics", "Pricing", "Contact" ], "buttons": [ "Start Writing", "Explore Reads" ], "description": "Fixed header with light or dark translucent glassmorphism background, functional mobile hamburger menu and smooth scrolling to each section.", "microinteractions": [ "Logo with an abstract pen or envelope drawn with a soft line", "Links with editorial stroke underline animation", "Buttons with elevation, orange, green and cyan glow", "Clean mobile menu transition" ] }, "hero": { "title": "Publish Ideas, Grow Readers and Build a Paid Newsletter in 3D", "subtitle": "Write posts, send newsletters, build a reader community, manage memberships and understand your audience from one elegant publishing workspace.", "main_action": { "input": "What do you want to publish?", "selector": [ "Newsletter", "Essay", "Podcast", "Community Post", "Paid Series", "Blog", "Weekly Digest", "Personal Journal" ], "button": "Create Publication" }, "buttons": [ "Enter LetterNest", "Explore Publications", "Start Free" ], "visible_text": "Demo publishing platform with fictional authors, posts and subscriber data.", "visual": "3D editorial library with floating pages, glowing envelopes, writer desk, laptop with editor, shelves, publication cards, author avatars, comments, analytics, subscriptions and visual depth." }, "canvas_3d": { "name": "Editorial Publishing Experience", "description": "Create a 3D scene inside a canvas representing a premium digital library for writers.", "elements": [ "3D editorial desk", "Laptop with open editor", "Floating pages", "Newsletter envelopes", "Digital shelves", "Publication cards", "Author profile", "Reader comments", "Subscriber panel", "Analytics dashboard", "Podcast card", "Post archive", "Membership card", "Floating registration CTA" ], "hotspots": [ "Writing Editor", "Newsletter Send", "Publication Card", "Reader Comments", "Membership", "Podcast Post", "Analytics", "Start Writing" ], "main_animation": "The Enter LetterNest button must trigger an animation where the camera enters the library, focuses on the editor, writes a title, publishes a post, sends a newsletter, shows readers opening letters, activates comments, opens analytics and ends in front of the Start Writing CTA." }, "sections": [ { "name": "Platform Overview", "title": "Write, Publish and Build a Loyal Reader Community", "description": "Explain that LetterNest helps writers, journalists, creators, analysts and communities publish ideas, send newsletters, manage members and understand what content connects with their audience.", "cards": [ "Elegant Editor", "Newsletter Delivery", "Reader Community", "Membership Analytics" ] }, { "name": "Discover Publications", "publications": [ "The Quiet Signal", "Future Notes Weekly", "Design Letters", "Code & Coffee Dispatch", "Market Mood Journal", "Slow Travel Essays", "Founder Field Notes", "Culture Thread", "Deep Work Digest", "Creative Systems" ], "fields": [ "Fictional author", "Category", "Excerpt", "Frequency", "Reading time", "Type: free, paid, community, podcast", "Fictional subscribers" ], "buttons": [ "Open Publication", "Subscribe", "Save Read" ] }, { "name": "Publication Detail", "elements": [ "Title", "Author", "Short bio", "Category", "Latest posts", "Archive", "About", "Community", "Membership plan" ], "buttons": [ "Read Latest", "Subscribe Free", "Become Paid Member", "Share Publication" ] }, { "name": "Writing Editor", "elements": [ "Title", "Subtitle", "Article body", "Minimalist toolbar", "Image placeholder", "Tags", "Category", "Preview", "Save state" ], "buttons": [ "Start Draft", "Preview Post", "Publish Demo", "Send Newsletter" ] }, { "name": "Reader Experience", "elements": [ "Fictional article", "Author", "Reading time", "Table of contents", "Reading mode", "Text size controls", "Highlight", "Save", "Share", "Comments" ], "buttons": [ "Open Reader Mode", "Highlight Quote", "Save Article", "Add Comment" ], "note": "Do not use real articles or protected text." }, { "name": "Newsletter", "elements": [ "Audience segment", "Subject line", "Email preview", "Delivery time", "Fictional open rate", "Fictional click rate", "Fictional subscriber count" ], "buttons": [ "Create Campaign", "Preview Email", "Schedule Send", "Send Test" ] }, { "name": "Authors", "authors": [ "Ava Marlow — Culture Essays", "Leo Park — Product Notes", "Nora Vega — Design Systems", "Milo Reed — Startup Letters", "Sofia Lane — Travel Writing", "Kai Torres — Tech Commentary", "Luna Brooks — Creative Practice", "Orion Finch — Deep Work" ], "buttons": [ "Open Author", "Follow", "Read Top Post" ] }, { "name": "Community", "elements": [ "Comments", "Discussion threads", "Member-only posts", "Polls", "Q&A", "Reader notes", "Events placeholder", "Community guidelines" ], "buttons": [ "Join Discussion", "Post Comment", "Vote Poll", "Ask Question" ] }, { "name": "Membership / Monetization", "elements": [ "Free subscribers", "Paid members", "Fictional monthly revenue", "Founding member tier", "Member-only posts", "Perks", "Upgrade flow" ], "buttons": [ "Create Paid Tier", "Preview Member Post", "Upgrade Demo", "Manage Members" ], "note": "Revenue data is fictional and not guaranteed." }, { "name": "Podcast / Audio Posts", "podcasts": [ "Essay Room Audio", "The Weekly Signal", "Founder Voice Notes", "Design Desk Podcast", "Culture Brief", "Deep Work Radio" ], "buttons": [ "Play Episode", "Save Episode", "Subscribe Audio" ], "note": "Do not use protected real audio." }, { "name": "Creator Dashboard / Analytics", "metrics": [ "Subscribers", "Fictional free-to-paid conversion", "Open rate", "Click rate", "Top posts", "New comments", "Revenue demo", "Growth trend", "Churn placeholder" ], "buttons": [ "Open Analytics", "Compare Posts", "Export Report", "View Growth Tips" ] }, { "name": "Publishing Tools", "tools": [ "Custom publication page", "Email capture form", "Import subscribers placeholder", "Tags and archive", "SEO basics", "Referral program placeholder", "Custom domain placeholder", "Moderation controls" ], "buttons": [ "Customize Publication", "Create Signup Form", "Import Demo Subscribers", "Open Settings" ] }, { "name": "Recommendations / Discovery", "elements": [ "Recommended writers", "Similar publications", "Fictional trending topics", "Reading history", "Saved reads", "Category filters" ], "buttons": [ "Refresh Recommendations", "Follow Topic", "Hide Suggestion", "Save Recommendation" ] }, { "name": "Pricing", "plans": [ "Free Reader", "Writer Starter", "Publication Pro", "Community Growth", "Editorial Studio" ], "recommended_plan": "Publication Pro", "buttons": [ "Choose Plan", "Start Free" ], "note": "Revenue and growth examples are fictional." }, { "name": "Testimonials", "testimonials": [ "LetterNest made publishing feel calm, independent and beautifully organized.", "The 3D editor and newsletter flow made it clear how posts become reader relationships.", "Analytics helped us understand which essays invited the most discussion." ] }, { "name": "FAQ", "questions": [ "Is this an official Substack website?", "Can I publish newsletters?", "Can I create paid memberships?", "Can I write articles and audio posts?", "Can I build a reader community?", "Are authors, metrics and revenue real?", "Does this guarantee subscriber growth?", "Is the website responsive on mobile?" ], "note": "Clearly state that this is an original fictional platform with no affiliation with Substack or any other real brand." }, { "name": "Signup / Contact", "fields": [ "Name", "Email", "Publication Name", "Main Topic", "Creator Type", "Audience Size", "Plan Interest", "Publishing Goal", "Message", "Consent Checkbox" ], "checkbox": "I understand this is a fictional publishing platform concept with simulated authors, posts, subscribers and revenue data.", "button": "Create LetterNest Publication" } ], "footer": { "logo": "LETTERNEST", "text": "Original fictional publishing platform concept. Not affiliated with Substack or any real newsletter brand.", "links": [ "Discover", "Write", "Newsletters", "Authors", "Community", "Memberships", "Podcasts", "Analytics", "Pricing", "Contact", "Terms", "Privacy", "Publishing Disclaimer", "Social links" ] } }, "required_interactions": [ "The menu must navigate smoothly to each section.", "Enter LetterNest must activate a guided animation in the 3D canvas.", "Explore Publications must go to Discover.", "Start Free must go to Pricing or Signup.", "Create Publication must create a simulated publication based on the selected type.", "Canvas hotspots must show information.", "Open Publication must open details.", "Subscribe must change state.", "Save Read must save the publication.", "Read Latest must open an article.", "Subscribe Free must register a simulated subscription.", "Become Paid Member must open membership.", "Share Publication must show confirmation.", "Start Draft must create a draft.", "Preview Post must open preview.", "Publish Demo must change state to published.", "Send Newsletter must simulate sending.", "Open Reader Mode must activate reading mode.", "Highlight Quote must highlight a fictional fragment.", "Save Article must change state.", "Add Comment must add a comment.", "Create Campaign must create a campaign.", "Preview Email must open preview.", "Schedule Send must create a schedule.", "Send Test must show confirmation.", "Open Author must open profile.", "Follow must change state.", "Read Top Post must open an article.", "Join Discussion must change state.", "Post Comment must open a form.", "Vote Poll must register a visual vote.", "Ask Question must create a question.", "Create Paid Tier must create a simulated tier.", "Preview Member Post must open view.", "Upgrade Demo must show a simulated flow.", "Manage Members must open a panel.", "Play Episode must activate a simulated player.", "Save Episode must change state.", "Subscribe Audio must change state.", "Open Analytics must open panel.", "Compare Posts must show comparison.", "Export Report must show confirmation.", "View Growth Tips must open recommendations.", "Customize Publication must change visual style.", "Create Signup Form must create a form.", "Import Demo Subscribers must show simulated import.", "Open Settings must open a panel.", "Refresh Recommendations must reorganize results.", "Follow Topic must change state.", "Hide Suggestion must hide a card.", "Save Recommendation must save.", "Choose Plan must select a plan and show a summary.", "FAQ must expand and collapse correctly.", "Create LetterNest Publication must validate fields, checkbox and show confirmation.", "The form must validate fields and show confirmation.", "The mobile menu must open and close correctly.", "All buttons must have hover, active state and visual feedback." ], "animations": [ "The camera must move from the library toward editor, discover, publication detail, reader experience, newsletter, authors, community, memberships, audio posts, analytics, publishing tools, pricing and signup.", "Pages must appear from depth using translateZ, scale and fade.", "Envelopes must open with a smooth animation and release ink particles.", "The editor must show simulated writing with an animated cursor.", "Publications must organize as floating editorial cards.", "Articles must open as reading pages with a calm transition.", "Comments must appear as small notes in the margin.", "Newsletters must travel as glowing letters toward abstract readers.", "Dashboards must assemble with widgets and progressive metrics.", "Membership cards must lift with 3D hover.", "Podcasts must appear as audio cards with soft waves.", "The archive must appear as a shelf or editorial timeline.", "The form must appear from depth with a clean transition." ], "visual_style": { "description": "Editorial, literary, premium, warm, minimalist, modern, independent and human.", "palette": [ "Paper cream", "Ink black", "Editorial white", "Warm orange", "Sage green", "Midnight blue", "Soft cyan", "Graphite gray", "Success green", "Soft red for errors" ], "assets": [ "Soft glassmorphism", "Clean cards", "Floating pages", "Envelopes", "Desks", "Books", "Minimalist editor", "Dashboards", "Comments", "Soft shadows", "Rounded borders" ], "typography": "Modern editorial typography; titles with personality, highly readable body text and an editor optimized for comfortable reading." }, "expected_result": "A complete, immersive and functional landing page for “Substack Clone 3D”, with an original “LetterNest”-style identity, 3D canvas, editorial library, writing editor, fictional publications, reader mode, newsletters, authors, community, memberships, audio posts, analytics, publishing tools, recommendations, pricing, testimonials, FAQ, signup, functional form with fictional concept checkbox, 3D scroll animations, parallax, hotspots, functional buttons, responsive design, generous margins, clear component separation and a premium original editorial platform aesthetic." }
Landing Pages
Buffer
clone
Buffer Clone — Social media scheduling
{ "buffer_clone_3d": { "name": "Buffer Clone 3D", "original_brand": "SOCIALQUEUE 3D", "suggested_route": "buffer-clone", "objective": "Create a premium, modern, clear, productive, immersive, functional and responsive landing page for an original social media scheduler, publishing manager, editorial calendar, content planning tool, analytics platform, collaboration hub and automation workspace for brands, creators, agencies and marketing teams.", "brand_note": "Avoid copying Buffer logos, brand names, exact visual identity or proprietary assets. Create an original fictional social media management platform with its own identity.", "main_concept": "The website should feel like entering a 3D control center for social media. As the user scrolls, the camera moves through a floating workspace with an editorial calendar, post cards, generic social panels, analytics, charts, team avatars, publishing queue, automation nodes, notifications, approval badges and a growth dashboard.", "main_requirements": [ "Create a complete, modern, functional and responsive landing page.", "Include a visible 3D canvas integrated into the main experience.", "Add 3D scroll animations.", "Add parallax effects on text, calendars, social cards, dashboards, charts, avatars, buttons, notifications, icons, timelines, publishing queues and backgrounds.", "Create an experience focused on social media planning, post scheduling, analytics, collaboration, approval workflows, editorial calendars, multichannel content and conversion.", "All buttons must work correctly.", "Optimize for desktop, tablet and mobile.", "Use smooth, precise, modern and performant animations.", "Keep the scene clean, premium, organized, friendly and easy to navigate.", "Use fictional data for posts, campaigns, metrics, channels, users, plans and reports." ], "structure_summary": { "header_logo": "SOCIALQUEUE 3D", "hero_title": "Plan, Schedule and Grow Your Social Channels in a 3D Content Workspace", "main_sections": [ "Product Overview", "Scheduler", "Content Calendar", "Post Queue", "Multi-Channel Publishing", "Collaboration", "Analytics", "Best Time to Post", "Ideas & Content Library", "Campaigns", "Integrations", "Use Cases", "Pricing", "Testimonials", "FAQ", "Contact / Signup" ] }, "canvas_3d": { "name": "Social Media Scheduling Workspace", "elements": [ "3D editorial calendar", "Floating post cards", "Publishing queue", "Channel panel", "Analytics dashboard", "Engagement charts", "Growth metrics", "Collaborator avatars", "Floating comments", "Approval badges", "Campaign timeline", "Scheduled notifications", "Idea inbox", "Asset library", "Hashtag panel", "Automation nodes", "Floating CTA" ], "hotspots": [ "Content Calendar", "Post Queue", "Multi-Channel Publishing", "Approval Flow", "Analytics Dashboard", "Hashtag Suggestions", "Asset Library", "Start Scheduling" ] }, "required_interactions": [ "Explore 3D Scheduler triggers a guided 3D canvas animation.", "Create Post generates a visual card.", "Schedule Post sends the post to the queue.", "Switch View changes the calendar view.", "Drag Post simulates moving a post.", "Approve changes the state to approved.", "Publish Now changes the state to published.", "Connect Channel changes the state to connected.", "Open Analytics opens the dashboard.", "Choose Plan selects a plan and shows a summary.", "Create My Social Workspace validates fields and shows confirmation." ], "visual_style": { "description": "Modern, friendly, productive, premium, clean, social, collaborative and trustworthy.", "palette": [ "Warm white", "Light blue", "Midnight blue", "Success green", "Soft purple", "Soft coral", "Graphite gray", "Subtle cyan", "Deep black" ] }, "expected_result": "A complete, immersive and functional landing page for “Buffer Clone 3D”, with a 3D canvas, social media scheduler, editorial calendar, post editor, publishing queue, multichannel publishing, collaboration, analytics, best-time recommendations, idea library, campaigns, integrations, use cases, pricing, testimonials, FAQ, signup, functional form, 3D scroll animations, parallax, hotspots, functional buttons, responsive design and a premium social media SaaS aesthetic." }, "cats_3d": { "name": "Cats 3D", "suggested_route": "cats", "objective": "Create a premium, modern, cute, elegant, immersive, functional and responsive landing page dedicated to cats. It can work as a cat adoption website, cat product store, cat lover community, specialized veterinary clinic, shelter, care blog or premium cat accessories brand.", "main_concept": "The website should feel like entering a warm and charming 3D feline world. As the user scrolls, the camera moves through a premium cat room with platforms, scratchers, soft beds, windows with natural light, floating toys, paw prints, yarn balls, food bowls, pet-safe plants, cat portraits, adoption cards, featured products and care areas.", "main_requirements": [ "Create a complete, modern, functional and responsive landing page.", "Include a visible 3D canvas integrated into the main experience.", "Add 3D scroll animations.", "Add parallax effects on text, cats, beds, scratchers, toys, paw prints, yarn balls, bowls, cards, buttons, windows, light, particles and backgrounds.", "Create an experience focused on cats, adoption, care, products, community, education, trust and conversion.", "All buttons must work correctly.", "Optimize for desktop, tablet and mobile.", "Use smooth, playful, warm and performant animations.", "Keep the scene clean, premium, adorable, organized and easy to navigate.", "Avoid visual saturation; the page should feel cute, clear, breathable and professional." ], "structure_summary": { "header_logo": "CATS 3D", "hero_title": "A Cozy 3D World for Cats, Care and Adoption", "main_sections": [ "Cats Overview", "Meet the Cats", "Cat Profile Modal", "Adoption", "Adoption Form", "Cat Care Guides", "Shop / Cat Essentials", "Adoption Kit", "Play & Enrichment", "Cat Breeds / Personality", "Stories", "Donate / Sponsor", "Reviews / Testimonials", "FAQ", "Contact" ] }, "canvas_3d": { "name": "Cat World Experience", "elements": [ "Main 3D cat", "Second cat sleeping or playing", "Tall cat tree", "Round bed", "Wall shelves", "Warm window light", "Yarn ball", "Toy mouse", "Ball", "Food plate", "Water bowl", "Elegant litter box", "Cat-safe plants", "Floating paw prints", "Adoption cards", "Featured products", "Floating adoption or shopping CTA" ], "hotspots": [ "Meet Luna", "Adoption Card", "Cat Tree", "Food Bowl", "Toys Corner", "Care Tips", "Cat Essentials", "Adopt Now" ] }, "required_interactions": [ "Enter Cat World activates a guided 3D canvas animation.", "Meet the Cats scrolls to the Cats section.", "Start Adoption scrolls to Adoption.", "View Cat opens a profile.", "Favorite changes state to favorite.", "Apply to Adopt goes to the adoption form.", "Sponsor This Cat goes to Donate.", "Submit Adoption Application validates fields and shows confirmation.", "Read Guide opens a guide.", "Add to Cart updates the mini cart.", "Add to Adoption Kit adds a product to the kit.", "Build Starter Kit starts the builder.", "Find Matching Cats filters cats.", "Donate opens a simulated donation flow.", "Contact Cat Team validates fields and shows confirmation." ], "visual_style": { "description": "Cute, warm, premium, friendly, modern, clean and adorable.", "palette": [ "Warm cream", "Sand beige", "Soft coral", "Sage green", "Window-light yellow", "Stone gray", "Wood brown", "Warm white", "Ink black", "Success green" ] }, "expected_result": "A complete, immersive and functional landing page for “Cats 3D”, with a 3D canvas, interactive feline room, 3D cats, adoption cards, profiles, adoption flow, form, care guides, shop, starter kit, activities, personalities, stories, donations, testimonials, FAQ, contact, 3D scroll animations, parallax, hotspots, functional buttons, responsive design and a premium cat-focused aesthetic." } }
Landing Pages
landing page
anime
MangaShelf — Digital manga reading library
A reading-first manga library focused on chapters, collections, and discovery. A reading-first manga library landing built around discovery, chapters, and collections. Create a single-page light mode landing for "MangaShelf", a Manga Platform site inspired by modern anime / otaku product design. Pure HTML + CSS in one index.html file (no frameworks). **Palette:** background #fffbf5, text #1c1917, muted #78716c, accent #f97316. **Typography:** Google Fonts — "Inter" (bold headlines, optional subtle gradient text on hero keyword). **Sections (in order):** 1. Sticky nav: logo "MangaShelf", links (Genres, Library, App), accent CTA ("Watch free" / "Get tickets" / "Join"). 2. Hero: pill "10,000+ series · Same-day Japan", large headline with one italic accent-colored keyword, subcopy, dual CTAs (primary gradient button + ghost outline). 3. Genre chips: Shonen, Josei, Horror, Sports. 4. Featured grid (3 cards): - **Blade of Ether** (TOP 10): Action · Monthly — Vol. 42 out now - **Café at Dusk** (ROMANCE): Drama · Completed — 12 volumes - **Hollow District** (HORROR): Mystery · Ongoing — Ch. 156 weekly Each card: label badge, title, genre/detail line, meta line (rating/episodes), "Watch" or "View" link. 5. Stats band: 3 metrics (e.g. "10k+ titles", "Simulcast", "HD streaming"). 6. Footer: email signup, social links, copyright. Anime aesthetic: vibrant accent gradients, poster-card grids with rounded corners, energetic but clean UI. Optional CSS gradient hero glow. Responsive (768px). Returns index.html only.
Landing Pages
landing page
anime
Studio Neko — Anime production and IP studio
A studio showcase for anime production, intellectual property, and behind-the-scenes creation. A studio showcase for anime production, IP development, and behind-the-scenes storytelling. Create a single-page light mode landing for "Studio Neko", a Anime Studio site inspired by modern anime / otaku product design. Pure HTML + CSS in one index.html file (no frameworks). **Palette:** background #fafafa, text #171717, muted #737373, accent #dc2626. **Typography:** Google Fonts — "Inter" (bold headlines, optional subtle gradient text on hero keyword). **Sections (in order):** 1. Sticky nav: logo "Studio Neko", links (Work, Process, Pitch), accent CTA ("Watch free" / "Get tickets" / "Join"). 2. Hero: pill "Tokyo · 2D animation since 2004", large headline with one italic accent-colored keyword, subcopy, dual CTAs (primary gradient button + ghost outline). 3. Genre chips: 2D animation, IP development, Co-production, Music. 4. Featured grid (3 cards): - **Echoes of Shibuya** (FILM): Feature · 2025 — In production - **Clockwork Garden** (SERIES): TV · Fantasy — Season 2 greenlit - **Global Co-pro** (COLLAB): Partnerships open — Inquire Each card: label badge, title, genre/detail line, meta line (rating/episodes), "Watch" or "View" link. 5. Stats band: 3 metrics (e.g. "10k+ titles", "Simulcast", "HD streaming"). 6. Footer: email signup, social links, copyright. Anime aesthetic: vibrant accent gradients, poster-card grids with rounded corners, energetic but clean UI. Optional CSS gradient hero glow. Responsive (768px). Returns index.html only.
Landing Pages
landing page
anime
CosplayHub — Cosplay makers marketplace
A marketplace for cosplay makers, commissions, and convention-ready goods. A community marketplace for cosplay makers, commissions, and convention-ready assets. Create a single-page dark mode landing for "CosplayHub", a Cosplay Community site inspired by modern anime / otaku product design. Pure HTML + CSS in one index.html file (no frameworks). **Palette:** background #1a0a2e, text #fdf4ff, muted #e9d5ff, accent #d946ef. **Typography:** Google Fonts — "Inter" (bold headlines, optional subtle gradient text on hero keyword). **Sections (in order):** 1. Sticky nav: logo "CosplayHub", links (Creators, Shop, Join), accent CTA ("Watch free" / "Get tickets" / "Join"). 2. Hero: pill "Creators · Commissions · Events", large headline with one italic accent-colored keyword, subcopy, dual CTAs (primary gradient button + ghost outline). 3. Genre chips: Commissions, Tutorials, Events, Marketplace. 4. Featured grid (3 cards): - **Armor & Props** (FEATURED): Full builds · Worldwide ship — From $400 - **Styled character wigs** (WIGS): Heat-resistant · Custom color — From $85 - **Convention photo sets** (PRINTS): Pro shoots · Digital delivery — From $25 Each card: label badge, title, genre/detail line, meta line (rating/episodes), "Watch" or "View" link. 5. Stats band: 3 metrics (e.g. "10k+ titles", "Simulcast", "HD streaming"). 6. Footer: email signup, social links, copyright. Anime aesthetic: vibrant accent gradients, poster-card grids with rounded corners, energetic but clean UI. Optional CSS gradient hero glow. Responsive (768px). Returns index.html only.
Landing Pages
landing page
meditation
StillMind — Meditation app for sleep and calm
A calm meditation app focused on sleep sessions, daily mindfulness, and gentle recovery. A calm meditation app landing with sleep sessions, breathing exercises, and daily mindfulness. Create a single-page light mode landing for "StillMind", a Meditation App wellness site. Pure HTML + CSS in one index.html file (no frameworks). **Palette:** background #f5f3ff, text #1e1b4b, muted #6b7280, accent #7c3aed. **Typography:** Google Fonts — "Inter" (light/medium weights, calm spacing). **Sections (in order):** 1. Sticky nav: logo "StillMind", links (Library, Sleep, Premium), soft rounded CTA ("Start free" / "Book retreat"). 2. Hero: pill "10 min a day · Science-backed", gentle headline with one italic keyword, calming subcopy, CTAs ("Begin session" + "Explore library"). 3. Practice chips: Guided, Unguided, Sleep, Focus. 4. Sessions grid (3 cards): - **Morning Calm** (BEGINNER): Guided · 10 min — Focus & clarity - **Anxiety Relief** (STRESS): Breathwork · 15 min — Body scan - **Deep Rest** (SLEEP): Story · 25 min — Fall asleep faster Each card: label, title, duration/detail, meta, "Start" link. Soft rounded cards, plenty of padding. 5. Stats band: 3 calm metrics (e.g. "500+ sessions", "2M minutes", "Certified guides"). 6. Footer: peaceful signup line, email input, copyright. Meditation aesthetic: soft gradients, rounded corners (16–24px), low contrast borders, airy whitespace, no harsh shadows. Responsive (768px). Returns index.html only.
Landing Pages
landing page
meditation
BreathSpace — Breathwork exercises and focus
A breathwork-first wellness landing built around guided cycles, focus timers, and recovery. A breathing-first wellness landing built around guided cycles, focus timers, and recovery. Create a single-page light mode landing for "BreathSpace", a Breathwork wellness site. Pure HTML + CSS in one index.html file (no frameworks). **Palette:** background #ecfdf5, text #134e4a, muted #5eead4, accent #0d9488. **Typography:** Google Fonts — "Inter" (light/medium weights, calm spacing). **Sections (in order):** 1. Sticky nav: logo "BreathSpace", links (Techniques, Timer, Science), soft rounded CTA ("Start free" / "Book retreat"). 2. Hero: pill "Box · 4-7-8 · Coherent", gentle headline with one italic keyword, calming subcopy, CTAs ("Begin session" + "Explore library"). 3. Practice chips: Stress, Sleep, Performance, Anxiety. 4. Sessions grid (3 cards): - **4-7-8 Relax** (CALM): 4 cycles · 3 min — Before sleep - **Power Breath** (ENERGY): 6 rounds · 5 min — Morning boost - **Box Breathing** (FOCUS): Navy SEAL · 8 min — Under pressure Each card: label, title, duration/detail, meta, "Start" link. Soft rounded cards, plenty of padding. 5. Stats band: 3 calm metrics (e.g. "500+ sessions", "2M minutes", "Certified guides"). 6. Footer: peaceful signup line, email input, copyright. Meditation aesthetic: soft gradients, rounded corners (16–24px), low contrast borders, airy whitespace, no harsh shadows. Responsive (768px). Returns index.html only.
Landing Pages
landing page
minimal
MonoNote — Minimal writing app
A distraction-free writing app landing for drafting, note capture, and deep work. Create a single-page light mode landing for "MonoNote", a Minimal Writing App. Pure HTML + CSS in one index.html file (no frameworks). **Palette:** background #ffffff, text #0a0a0a, muted #737373, accent #0a0a0a. **Typography:** Google Fonts — "Inter" (400–500 weights only). **Minimal design rules:** no box shadows, no gradients, border-radius 0–4px max, 1px borders only, abundant whitespace, max-width ~720px for hero text, text-only nav with thin bottom rule. **Sections (in order):** 1. Minimal nav: brand text only (no logo icon), links (Features, Pricing, Download), understated text CTA ("Start writing"). 2. Hero: small caps pill "Distraction-free · Markdown", large headline with one italic keyword, one-line subcopy, single underlined or bordered CTA. 3. Numbered feature list (not cards): - **Focus mode** (01): Full-screen editor with zero chrome - **Sync everywhere** (02): End-to-end encrypted across devices - **Export clean** (03): PDF, MD, and plain text in one click Large orange/black numbers on the left, title + one line detail, separated by 1px horizontal rules. 4. Optional thin full-width placeholder block (dashboard or mockup) with 1px border only. 5. Footer: single line copyright + one email input, no multi-column footer. Aesthetic: Stripe / Linear / Vercel docs inspired — editorial, calm, grid-aligned. Responsive (768px). Returns index.html only.
Landing Pages
landing page
minimal
Linea — Minimal design studio
A minimalist design studio landing focused on identity systems, product UI, and visual craft. Create a single-page light mode landing for "Linea", a Design Studio. Pure HTML + CSS in one index.html file (no frameworks). **Palette:** background #f7f6f3, text #1c1917, muted #a8a29e, accent #1c1917. **Typography:** Google Fonts — "Inter" (400–500 weights only). **Minimal design rules:** no box shadows, no gradients, border-radius 0–4px max, 1px borders only, abundant whitespace, max-width ~720px for hero text, text-only nav with thin bottom rule. **Sections (in order):** 1. Minimal nav: brand text only (no logo icon), links (Work, Studio, Contact), understated text CTA ("View work"). 2. Hero: small caps pill "Brand · Digital · Spatial", large headline with one italic keyword, one-line subcopy, single underlined or bordered CTA. 3. Numbered feature list (not cards): - **Strategy** (01): Research-led positioning for growing brands - **Identity** (02): Logos, systems, and guidelines that scale - **Digital** (03): Websites and products with restraint Large orange/black numbers on the left, title + one line detail, separated by 1px horizontal rules. 4. Optional thin full-width placeholder block (dashboard or mockup) with 1px border only. 5. Footer: single line copyright + one email input, no multi-column footer. Aesthetic: Stripe / Linear / Vercel docs inspired — editorial, calm, grid-aligned. Responsive (768px). Returns index.html only.
Landing Pages
landing page
e-commerce
ArtisanBox — Handmade marketplace
Create a single-page light mode landing for "ArtisanBox", a Handmade Marketplace e-commerce site. Pure HTML + CSS in one index.html file (no frameworks). **Palette:** background #faf6f1, text #292524, muted #78716c, accent #92400e. **Typography:** Google Fonts — "Inter". **Sections (in order):** 1. Sticky nav: logo "ArtisanBox", category links (Ceramics, Jewelry, Gifts), cart icon placeholder + CTA ("Explore makers"). 2. Hero: pill "Made by makers · Shipped with care", headline with one italic keyword, value subcopy, CTAs ("Explore makers" + "Browse catalog"). 3. Category chips: Ceramics, Textiles, Woodwork, Prints. 4. Product grid (3 cards): - **Stoneware Mug** (HAND): Wheel-thrown · matte glaze — $34 - **Brass Earrings** (LOCAL): Hammered · hypoallergenic — $48 - **Candle Trio** (GIFT): Soy · seasonal scents — $36 Each card: sale/new badge, product image placeholder, title, variant line, price, "Add to cart" button. 5. Trust/perks band: 500+ Independent makers, Gift Wrap available, Fair Trade pricing. 6. Footer: newsletter signup, payment icons row (text labels), copyright. E-commerce aesthetic: clean product photography areas, price prominence, subtle card borders, mobile-friendly grid. Responsive (768px). Returns index.html only.
Landing Pages
landing page
fintech
VaultPay — Everyday digital banking
A digital banking landing focused on daily account usage, cards, balances, and transfers. A neobank landing focused on everyday banking, cards, balances, and modern money management. A fintech landing for modern banking, cards, and secure personal finance. Create a single-page dark mode landing for "VaultPay", a Digital Neobank fintech product site. Pure HTML + CSS in one index.html file (no frameworks). **Palette:** background #0c1222, text #f1f5f9, muted #94a3b8, accent #3b82f6. **Typography:** Google Fonts — "Inter" (UI) + optional geometric sans for headlines. **Sections (in order):** 1. Sticky nav: logo "VaultPay", links (Personal, Business, Pricing), primary CTA ("Open account"). 2. Split hero: pill "FDIC insured · No monthly fees", headline with one italic keyword, trust subcopy, CTAs ("Open account" + "See demo"), **card mockup** on the right (card UI, dashboard, chart, or payment terminal — fintech-specific). 3. Product chips: Checking, Savings, Wire, Business. 4. Features grid (3 cards): - **High-yield checking** (ACCOUNTS): 4.5% APY · no minimum — Instant open - **Metal debit** (CARDS): 1.5% cashback · Apple Pay — Ships in 3 days - **Wire & ACH** (TRANSFER): Same-day · 180 countries — Zero FX markup Each card: label badge, title, detail, meta line, subtle border, no heavy shadows. 5. Trust/stats band: $0 Monthly fees, 4.5% APY savings, 2M+ Customers. 6. Footer: compliance line (e.g. "Not a bank" / "Securities offered through…"), email signup, copyright. Fintech aesthetic: clean grids, security badges, monospace accents for numbers, professional trust signals, responsive (768px). Returns index.html only.
Landing Pages
landing page
fintech
LedgerFlow — Bookkeeping and reporting
An accounting platform landing focused on bookkeeping, reconciliation, and reporting visibility. An accounting SaaS landing focused on bookkeeping, reconciliation, and financial reporting. An accounting SaaS landing for bookkeeping, reconciliation, and reporting workflows. Create a single-page light mode landing for "LedgerFlow", a Accounting Platform fintech product site. Pure HTML + CSS in one index.html file (no frameworks). **Palette:** background #f0fdf4, text #14532d, muted #4d7c5c, accent #059669. **Typography:** Google Fonts — "Inter" (UI) + optional geometric sans for headlines. **Sections (in order):** 1. Sticky nav: logo "LedgerFlow", links (Product, Integrations, Demo), primary CTA ("Start free trial"). 2. Split hero: pill "Close books 3× faster", headline with one italic keyword, trust subcopy, CTAs ("Start free trial" + "See demo"), **dashboard mockup** on the right (card UI, dashboard, chart, or payment terminal — fintech-specific). 3. Product chips: Invoicing, Payroll, Tax, Audit trail. 4. Features grid (3 cards): - **Smart invoicing** (AP/AR): OCR receipts · auto-match — QuickBooks sync - **Live P&L** (REPORT): Multi-entity · GAAP ready — Export CSV - **Role-based access** (TEAM): Auditor view · approvals — SOC2 Type II Each card: label badge, title, detail, meta line, subtle border, no heavy shadows. 5. Trust/stats band: 3× Faster close, 500+ Integrations, 99.9% Uptime. 6. Footer: compliance line (e.g. "Not a bank" / "Securities offered through…"), email signup, copyright. Fintech aesthetic: clean grids, security badges, monospace accents for numbers, professional trust signals, responsive (768px). Returns index.html only.
Landing Pages
landing page
fintech
CryptoPulse — Market trading dashboard
A market-trading landing focused on execution, watchlists, and portfolio signals. A trading landing built for market monitoring, order execution, and portfolio signals. A crypto trading landing built around charts, execution, and market monitoring. Create a single-page dark mode landing for "CryptoPulse", a Crypto Trading fintech product site. Pure HTML + CSS in one index.html file (no frameworks). **Palette:** background #0f0a1a, text #faf5ff, muted #a78bfa, accent #a855f7. **Typography:** Google Fonts — "Inter" (UI) + optional geometric sans for headlines. **Sections (in order):** 1. Sticky nav: logo "CryptoPulse", links (Markets, Fees, Security), primary CTA ("Start trading"). 2. Split hero: pill "Spot · Perps · Staking", headline with one italic keyword, trust subcopy, CTAs ("Start trading" + "See demo"), **chart mockup** on the right (card UI, dashboard, chart, or payment terminal — fintech-specific). 3. Product chips: BTC, ETH, SOL, DeFi. 4. Features grid (3 cards): - **200+ pairs** (TRADE): 0.05% maker · deep books — 24/7 liquidity - **Staking yields** (EARN): Up to 8% APY · auto-compound — Cold storage - **API & bots** (PRO): FIX · WebSocket · backtest — 99.99% uptime Each card: label badge, title, detail, meta line, subtle border, no heavy shadows. 5. Trust/stats band: $12B Daily volume, 0.05% Maker fee, 180 Countries. 6. Footer: compliance line (e.g. "Not a bank" / "Securities offered through…"), email signup, copyright. Fintech aesthetic: clean grids, security badges, monospace accents for numbers, professional trust signals, responsive (768px). Returns index.html only.
Landing Pages
landing page
fintech
LendWise — Borrower approvals and loans
A lending landing focused on approval speed, borrower trust, and repayment clarity. A loan landing that explains approvals, repayment clarity, and borrower trust. A lending landing that explains personal loans, approval speed, and transparent terms. Create a single-page dark mode landing for "LendWise", a Personal Lending fintech product site. Pure HTML + CSS in one index.html file (no frameworks). **Palette:** background #0f172a, text #f8fafc, muted #94a3b8, accent #eab308. **Typography:** Google Fonts — "Inter" (UI) + optional geometric sans for headlines. **Sections (in order):** 1. Sticky nav: logo "LendWise", links (Rates, How it works, Apply), primary CTA ("Check your rate"). 2. Split hero: pill "Rates from 6.99% APR", headline with one italic keyword, trust subcopy, CTAs ("Check your rate" + "See demo"), **calculator mockup** on the right (card UI, dashboard, chart, or payment terminal — fintech-specific). 3. Product chips: Personal, Debt consolidate, Home improve, Medical. 4. Features grid (3 cards): - **Up to $50k** (LOAN): Fixed rate · 24–60 mo — Soft check first - **Same-day fund** (SPEED): Decision in minutes — Direct deposit - **Skip-a-pay** (FLEX): No prepayment penalty — Mobile app Each card: label badge, title, detail, meta line, subtle border, no heavy shadows. 5. Trust/stats band: 6.99% Starting APR, 2 min Pre-approval, 4.8★ Trustpilot. 6. Footer: compliance line (e.g. "Not a bank" / "Securities offered through…"), email signup, copyright. Fintech aesthetic: clean grids, security badges, monospace accents for numbers, professional trust signals, responsive (768px). Returns index.html only.
Landing Pages
landing page
music
BeatForge — Creator marketplace
A creator marketplace landing centered on digital products, discoverability, and sales. Create a single-page dark mode landing for "BeatForge", a Beat Marketplace. Pure HTML + CSS in one index.html file (no frameworks). **Palette:** background #18120b, text #fef3c7, muted #d6d3d1, accent #f97316. **Typography:** Google Fonts — "Inter" + optional display font for headlines. **Sections (in order):** 1. Sticky nav: logo "BeatForge", links (Beats, Licenses, Sell), primary CTA ("Browse beats"). 2. Split hero: pill "Lease · Exclusive · Stems", headline with one italic keyword, music subcopy, CTAs ("Browse beats" + "Explore catalog"), **waveform mockup** (player, waveform, vinyl, podcast episodes, stage lights, or playlist — music-specific). 3. Genre/product chips: Trap, Drill, R&B, Afrobeat. 4. Features grid (3 cards): - **MP3 lease** (LEASE): From $29 · 50k streams — Instant DL - **Exclusive rights** (EXCL): WAV + stems · 1 buyer — From $299 - **Producer storefront** (SELL): 70% rev share · analytics — Payout weekly 5. Stats band: 80k+ Beats, 15k Producers, $29 From. 6. Footer: newsletter + copyright. Music aesthetic: album-art gradients, play buttons, waveform or track-list UI, vibrant or retro palettes, responsive (768px). Returns index.html only.
Landing Pages
landing page
music
EchoCast — Music podcast archive (curated)
A companion archive landing for curated episode collections and replay access. It highlights featured conversations and rotating music picks. Pure HTML + CSS in one index.html file (no frameworks). **Palette:** background #ffffff, text #18181b, muted #71717a, accent #f43f5e. **Typography:** Google Fonts — "Inter" + optional display font for headlines. **Sections in order:** 1. Sticky nav: logo "EchoCast", links (Shows, Creators, App), primary CTA ("Listen free"). 2. Split hero: pill "Artist interviews · Behind the track", headline with one italic keyword, music subcopy, CTAs ("Listen free" + "Explore catalog"), **podcast mockup** (player, waveform, vinyl, podcast episodes, stage lights, or playlist — music-specific). 3. Genre/product chips: Interviews, Live, Reviews, Indie. 4. Features grid (3 cards): - **Exclusive series** (SHOWS): Studio sessions · tours — Weekly drops - **Highlight reels** (CLIPS): Share to social · timestamps — Under 60s - **Listening parties** (LIVE): Chat · album premieres — Free RSVP 5. Stats band: 2k+ Shows, 4.8★ App Store, 0 Ads on free. 6. Footer: newsletter + copyright. Music aesthetic: album-art gradients, play buttons, waveform or track-list UI, vibrant or retro palettes, responsive (768px). Returns index.html only.
Landing Pages
landing page
travel
TrailPath — Adventure tours and route bookings
An adventure operator landing for guided routes, activity packages, and trip booking. An adventure travel landing for guided routes, outdoor packages, and bookings. Create a single-page light mode landing for "TrailPath", a Adventure Tour Operator. Pure HTML + CSS in one index.html file (no frameworks). **Palette:** background #f0fdf4, text #14532d, muted #4ade80, accent #16a34a. **Typography:** Google Fonts — "Inter" for UI; elegant headlines with travel wanderlust energy. **Sections (in order):** 1. Sticky nav: logo "TrailPath", links (Tours, Gear, Safety), primary CTA ("Browse tours"). 2. Split hero: pill "Hike · Climb · Camp", headline with one italic keyword, travel subcopy, CTAs ("Browse tours" + "Explore destinations"), **map mockup** (trip search, hotel suite, trail map, hostel beds, cruise itinerary, local experiences, or flight ticket — travel-specific). 3. Destination/experience chips: Patagonia, Dolomites, Nepal, Iceland. 4. Features grid (3 cards): - **Certified leaders** (GUIDE): Wilderness first aid — 1:6 ratio - **Equipment included** (GEAR): Tents · packs · GPS — No rental hassle - **Leave no trace** (IMPACT): Local partners · carbon offset — B Corp 5. Stats band: 120+ Routes, 15yr Experience, 4.9★ Guest rating. 6. Footer: newsletter + copyright. Travel aesthetic: destination photography placeholders, map routes, booking cards, warm or ocean palettes, responsive (768px). Returns index.html only.
Landing Pages
landing page
travel
Voyage — Cruise itineraries and onboard cabins
A cruise landing focused on itineraries, onboard experiences, and cabin upgrades. A cruise landing focused on itineraries, ship experiences, and cabin upgrades. Create a single-page dark mode landing for "Voyage", a Cruise Line. Pure HTML + CSS in one index.html file (no frameworks). **Palette:** background #0f172a, text #e2e8f0, muted #94a3b8, accent #38bdf8. **Typography:** Google Fonts — "Inter" for UI; elegant headlines with travel wanderlust energy. **Sections (in order):** 1. Sticky nav: logo "Voyage", links (Itineraries, Ships, Book), primary CTA ("View cruises"). 2. Split hero: pill "Caribbean · Mediterranean · Alaska", headline with one italic keyword, travel subcopy, CTAs ("View cruises" + "Explore destinations"), **cruise mockup** (trip search, hotel suite, trail map, hostel beds, cruise itinerary, local experiences, or flight ticket — travel-specific). 3. Destination/experience chips: Caribbean, Med, Alaska, Asia. 4. Features grid (3 cards): - **Balcony suites** (CABIN): Ocean views · butler — All-inclusive - **Curated excursions** (PORT): Snorkel · culture · food — 50+ ports - **Family clubs** (KIDS): Ages 3–17 programs — Free childcare 5. Stats band: 12 Ships, 50+ Ports, All-in Pricing. 6. Footer: newsletter + copyright. Travel aesthetic: destination photography placeholders, map routes, booking cards, warm or ocean palettes, responsive (768px). Returns index.html only.
Landing Pages
landing page
travel
TerraGuide — Local experiences and city hosts
A marketplace for city experiences, local hosts, and neighborhood discovery. A local experience marketplace for city tours, hosts, and neighborhood discovery. Create a single-page light mode landing for "TerraGuide", a Local Experiences Marketplace. Pure HTML + CSS in one index.html file (no frameworks). **Palette:** background #fff1f2, text #881337, muted #fb7185, accent #e11d48. **Typography:** Google Fonts — "Inter" for UI; elegant headlines with travel wanderlust energy. **Sections (in order):** 1. Sticky nav: logo "TerraGuide", links (Experiences, Hosts, Gift), primary CTA ("Explore tours"). 2. Split hero: pill "Food · Art · Nature", headline with one italic keyword, travel subcopy, CTAs ("Explore tours" + "Explore destinations"), **experiences mockup** (trip search, hotel suite, trail map, hostel beds, cruise itinerary, local experiences, or flight ticket — travel-specific). 3. Destination/experience chips: Food, Art, Hike, Nightlife. 4. Features grid (3 cards): - **Verified locals** (HOST): ID · reviews · insurance — 4.9★ avg - **Small groups** (SMALL): Max 8 guests — Intimate - **Experience gifts** (GIFT): Instant voucher · PDF — Any date 5. Stats band: 15k+ Experiences, 80 Cities, 4.9★ Rating. 6. Footer: newsletter + copyright. Travel aesthetic: destination photography placeholders, map routes, booking cards, warm or ocean palettes, responsive (768px). Returns index.html only.
Landing Pages
landing page
travel
SkyRoute — Flight deals and fare alerts
A deal finder for flights, fare alerts, and fast booking decisions. A deal finder for flights, fare alerts, and time-sensitive booking decisions. A travel deals landing for flights, fare alerts, and booking fast before prices move. Create a single-page dark mode landing for "SkyRoute", a Flight Deals Platform. Pure HTML + CSS in one index.html file (no frameworks). **Palette:** background #0c0a1f, text #e0e7ff, muted #a5b4fc, accent #6366f1. **Typography:** Google Fonts — "Inter" for UI; elegant headlines with travel wanderlust energy. **Sections (in order):** 1. Sticky nav: logo "SkyRoute", links (Deals, Alerts, Points), primary CTA ("Find flights"). 2. Split hero: pill "Alerts · Multi-city · Points", headline with one italic keyword, travel subcopy, CTAs ("Find flights" + "Explore destinations"), **flight mockup** (trip search, hotel suite, trail map, hostel beds, cruise itinerary, local experiences, or flight ticket — travel-specific). 3. Destination/experience chips: Europe, Asia, USA, Weekend. 4. Features grid (3 cards): - **Price drop pings** (ALERT): Email · push · SMS — Free - **Hack itineraries** (MIX): Hidden-city · layovers — Save 40% - **Points optimizer** (PTS): Transfer partners — 1.5× value 5. Stats band: 40% Avg. savings, 500+ Airlines, 2M Alerts sent. 6. Footer: newsletter + copyright. Travel aesthetic: destination photography placeholders, map routes, booking cards, warm or ocean palettes, responsive (768px). Returns index.html only.
Landing Pages
3D
photography
3D Photography Portfolio with Video Projections on Surfaces
Build an elegant, silent 3D photography portfolio with video projections on fabric panels and walls. **Deliverables:** index.html, styles.css, photo3d.js, assets/ folder. **Stack:** Three.js, video textures, CSS grid for UI. **Description:** 3D surfaces (fabric panels, walls) that project photographic videos; hovering expands the projection and the camera performs a smooth pan. Elegant and silent aesthetic. **Key interactions:** Hover to expand, click for fullscreen, clip scrubbing. **Accessibility & fallback:** 2D gallery with captions and subtitles. **Recommended assets:** 4–12s clips, fabric textures, panel models.
Landing Pages
3D
SaaS
3D SaaS Product Experience with Integrated Video Demo
Build a minimal, elegant 3D SaaS product experience with an integrated video demo that guides the camera through the mockup. **Deliverables:** index.html, styles.css, product3d.js, assets/ folder. **Stack:** Three.js, video textures, GSAP. **Description:** 3D panel containing a product mockup; activating "Play demo" plays a synchronized video that guides the camera through the mockup and highlights features with luminous halos. Minimal and elegant design. **Key interactions:** Play/pause demo, hotspots with microvideos, subtitles. **Accessibility & fallback:** 2D demo video and transcript. **Recommended assets:** 90s demo video, GLB models of UI.
Landing Pages
3D
finance
3D Financial Data Visualizer with Video Insights
Build a 3D financial data visualizer with floating KPI widgets and synchronized video insights. **Deliverables:** index.html, styles.css, finance3d.js, assets/ folder. **Stack:** Three.js, D3.js, HTML5 video. **Description:** Floating 3D widgets displaying KPIs; selecting a widget plays a video insight with analysis and the visualization animates to illustrate the narrative. Sober palette and geometric typography. **Key interactions:** Compare periods with split camera, synchronized scrubbing of video and data. **Accessibility & fallback:** Tables and videos with subtitles. **Recommended assets:** 60–120s explanatory videos, JSON datasets.
Landing Pages
3D
conference
3D Conference Room with Live Streaming and Highlight Clips
Build an elegant 3D conference room for events featuring a live stream on the central screen, highlight clips on side screens, and a virtual audience. **Deliverables:** index.html, styles.css, conference.js, assets/ folder. **Stack:** Three.js, HLS/WebRTC, video textures, postprocessing. **Description:** Elegant 3D room for events: the main stream appears on the central screen; highlight clips play on side screens with smooth transitions. Virtual audience with subtle animations. **Key interactions:** Choose camera angle, play clips, mark key moments. **Accessibility & fallback:** Live subtitles, 2D version of the stream. **Recommended assets:** HLS streams, highlight clips, room models.
Landing Pages
3D
corporate
3D Corporate Timeline with Animated Dioramas and Video Narration
Build a 3D corporate timeline with elegant animated dioramas and narrated video at each milestone. **Deliverables:** index.html, styles.css, timeline3d.js, assets/ folder. **Stack:** Three.js, HTML5 video, ScrollTrigger. **Description:** 3D timeline with elegant dioramas; upon reaching each milestone a narrated video plays and the camera pans with cinematic easing. Serif typography for titles. **Key interactions:** Keyboard navigation between milestones, timeline scrubbing, subtitles. **Accessibility & fallback:** Transcripts and linear version with videos. **Recommended assets:** 60–120s narrated clips, diorama models.
Landing Pages
3D
luxury
Luxury 3D Showroom with Product Video and Microanimations
Build a luxury 3D showroom with a pedestal, spotlight, high-production product video, and realistic PBR reflections. **Deliverables:** index.html, styles.css, showroom.js, assets/ folder. **Stack:** Three.js, HTML5 video, PBR materials. **Description:** Showroom with a 3D pedestal and spotlight; selecting a product plays a high-production video and the object performs a slow rotation with realistic reflections. **Key interactions:** Smooth orbit controls, "View in detail" button → macro camera + video. **Accessibility & fallback:** Technical spec sheet and 2D video; prefers-reduced-motion support. **Recommended assets:** Optional 4K video, HDRI for lighting, GLB models.
Landing Pages
3D
product
3D Product Gallery with Display Cases and Promotional Clips
Build a 3D product gallery with rotating display cases, promotional video clips, and elegant typography specs. **Deliverables:** index.html, styles.css, gallery3d.js, assets/ folder. **Stack:** Three.js, video textures, lazy-load. **Description:** Rotating 3D display cases with floating products; when approaching a case it plays a promotional clip and reveals specs in elegant typography. Smooth transitions and volumetric shadows throughout. **Key interactions:** Hover to preview, click to play video in overlay, drag to rearrange display cases. **Accessibility & fallback:** 2D gallery with thumbnails and videos; prefers-reduced-motion support. **Recommended assets:** 30–60s clips, product models, PBR textures.
Landing Pages
3D
corporate
Elegant 3D Corporate Lobby with Welcome Video
Build an elegant minimalist 3D corporate lobby with a welcome video and smooth camera choreography. **Deliverables:** index.html, styles.css, lobby.js, assets/ folder with GLB building model and welcome video. **Stack:** Three.js, HTML5 video, GSAP. **Description:** Minimalist 3D lobby with soft lighting; upon entering, a welcome video plays on a floating screen and the camera performs an elegant dolly-in toward the logo. Hotspots display 20–30s microvideos about the company. **Key interactions:** Drag to rotate, scroll to zoom, click on hotspots → fly-to + video modal. **Accessibility & fallback:** SRT subtitles, 2D version with the same video and text. **Recommended assets:** 1080p video, optimized GLB model, voiceover.
Landing Pages
3D
dashboard
3D Corporate Performance Dashboard with Video Insights and Comparator
Build a 3D corporate performance dashboard with floating widgets, video insights, and a split-screen period comparator. **Deliverables:** index.html, styles.css, dashboard3d.js, assets/ folder with insight videos, datasets, and widget models. **Stack:** Three.js for 3D widgets, HTML5 video for insights, D3.js for detailed charts, WebSocket for live data. **Description:** 3D dashboard composed of floating widgets (charts, maps, KPI cubes). Selecting a widget plays a video insight explaining the trend and suggesting actions; the user can compare two time periods side by side with a split camera and synchronized videos. **Key interactions:** Click to open video insight, drag to rearrange widgets, temporal comparator with synchronized scrubbing of videos and data animations. **Accessibility & fallback:** Subtitles and transcripts, 2D version with traditional dashboards and videos, prefers-reduced-motion for animations. **Recommended assets:** Explanatory videos 90–180s, CSV/JSON datasets, GLB widget models and visualization textures.
Landing Pages
3D
corporate
3D Corporate Lobby with Welcome Video and Dynamic Agenda
Build a 3D corporate lobby that acts as an interactive portal with a welcome video and dynamic real-time agenda. **Deliverables:** index.html, styles.css, lobby.js, assets/ folder with welcome video, room models, and calendars. **Stack:** Three.js, video textures, WebRTC optional for live messages, GSAP for transitions. **Description:** 3D lobby acting as a portal: upon entering, a welcome video plays on a central screen; floating panels display the real-time daily agenda and allow playing session videos or opening virtual rooms with a fly-to transition. **Key interactions:** Select agenda items to play session videos, 3D notifications that animate the scene, free camera control or guided views. **Accessibility & fallback:** Subtitles on videos, 2D version with agenda and video links, prefers-reduced-motion support. **Recommended assets:** 60s welcome video, session clips, GLB models of rooms and signage.
Landing Pages
3D
compliance
3D Compliance & Audit Center with Video Replays and Timeline
Build a 3D compliance and audit center featuring video replays and an animated timeline. **Deliverables:** index.html, styles.css, compliance3d.js, assets/ folder with replays, logs, and infrastructure models. **Stack:** Three.js, HTML5 video for replays, D3.js for complementary charts, GSAP Timeline. **Description:** 3D visualization of infrastructure and compliance processes; incidents appear as markers that, when activated, play a video replay of the event and display the timeline with animated audit steps. **Key interactions:** Timeline scrubbing to navigate replays, severity filters, automatic fly-to when selecting an incident, export UI for reports. **Accessibility & fallback:** Downloadable transcripts and logs, reduced-motion mode, linear version with videos and tables. **Recommended assets:** Segmented replay clips, JSON logs, GLB models of nodes and services.
Landing Pages
3D
product
3D Product Showroom for Corporate Demos with Video Case Studies
Build a 3D product showroom for corporate demos featuring video case studies. **Deliverables:** index.html, styles.css, demoRoom.js, assets/ folder with product models, case study clips, and thumbnails. **Stack:** Three.js, video textures, Prism or similar for code overlays, GSAP for microanimations. **Description:** 3D display cases containing interactive prototypes; selecting a case plays a video case study and the case opens in 3D revealing specs, integrations, and a mini-demo video synchronized with the animation. **Key interactions:** Hover to preview, click to open 3D modal with video, video scrubbing synchronizes the prototype animation. **Accessibility & fallback:** Subtitles, textual descriptions of demos, 2D version with video gallery and technical spec sheets. **Recommended assets:** 60–90s clips per case, 3D product models, PDF files with specifications.
Landing Pages
3D
corporate
Immersive 3D Corporate Tour for Investors
Build an immersive 3D corporate tour for investors. **Deliverables:** index.html, styles.css, app.js, assets/ folder with GLB models, institutional videos, and graphics. **Stack:** Three.js for 3D scene, GSAP for transitions, HTML5 video as textures, WebSocket optional for real-time data. **Description:** Hero section features a 3D corporate headquarters with orbit camera; hotspots on buildings play short videos (strategy, finance, R&D). When a hotspot is activated, the camera performs a smooth fly-to and a 3D panel appears with animated metrics and a narrated video with subtitles. **Key interactions:** Drag to rotate, scroll to zoom, keyboard shortcuts for predefined views, autoplay guided tour with voiceover and chapter markers. **Accessibility & fallback:** SRT subtitles, transcripts, prefers-reduced-motion support, fallback to hero video and downloadable PDF with the same narrative. **Recommended assets:** Optimized GLB models, H.264 720p videos, JSON with KPIs and voice-overs in multiple languages.
Landing Pages
3D
coworking
3D Interactive Coworking Lobby with Welcome Videos and Guided Tour - Partner Edition
A bright professional 3D lobby as the entry portal for a coworking space. The scene includes a reception desk, info screen panels, and doors to zones (meeting rooms, private offices, open areas). Each door is a 3D hotspot with an accessible aria-label and a 20-60s video explaining the space (tour, rules, hours). On load, camera starts in a wide view; a floating 'Start Tour' button activates a guided tour with smooth GSAP fly-tos (easeOutCubic, 800-1200ms) toward each hotspot, playing video in an HTML overlay with synchronized SRT subtitles. Video also projects as a texture on a 3D plane. Navigation combines orbit controls for free exploration and numeric shortcuts (1: reception, 2: rooms, 3: open area). On mobile, hotspots activate on double-tap. Proximity detection: camera within 3.5m triggers micro-animation (scale 1.06 + glow) and muted video preview. Progressive video loading: WebP thumbnail, 480p proxy for scrubbing, 720/1080p for full playback. Performance: LOD for furniture, 512-1024px textures, pause render offscreen. Accessibility: SRT subtitles, downloadable transcripts, role=dialog, prefers-reduced-motion disables fly-to. Analytics: hotspots activated, playback time, tour starts. **Deliverables:** index.html, styles.css, lobby3d.js, assets/ (GLB lobby models, MP4 welcome videos, WebP thumbnails, voiceovers, SRT). **Stack:** Three.js, GSAP, video HTML5 textures, Draco GLB compression, IntersectionObserver. **Interactions:** Orbit controls, guided tour, numeric shortcuts (1/2/3), click hotspot opens video overlay with SRT, proximity glow animation, double-tap on mobile, download transcripts, light filter for progressive video.
Landing Pages
Spotify
clone
Spotify Clone — Home Page
Create a clone of the Spotify home page (spotify.com) using pure HTML and CSS (no frameworks). Structure the project in two files: index.html and styles.css. Design requirements: 1. Color palette: black background (#000), Spotify green (#1ed760), gray (#b3b3b3, #282828, #121212), white for main texts. 2. Typography: Montserrat or similar sans-serif, with weights 400/700/900. Large titles with font-weight: 900 and negative letter-spacing. 3. Sections (in this order): Navbar sticky (SVG inline logo, Premium/Support/Download, Register, Login); Hero with diagonal green gradient; Premium Plans (Individual, Duo, Family); Features grid 4 columns; purple→blue final CTA; Footer with columns and networks. 4. Buttons: primary white border-radius 999px hover scale(1.04); transparent outline gray border. 5. Language: Spanish (es). 6. Responsive: clamp(), auto-fit minmax, hide nav-links on mobile (<768px). 7. No external images (gradients and emojis).
Landing Pages
landing page
Skill Future
Skill Future — Programming Education
Create a single-page web page (single-file HTML with embedded CSS, without external frameworks except Google Fonts) that clones the style of skillfuture.xyz, an educational programming platform. **Stack and structure:** * Semantic HTML5 + pure CSS3 in <style>, mobile-first responsive. * Source: Inter (Google Fonts, weights 400–800). * Palette: background #ffffff, text #0f172a, muted #475569, lines #e2e8f0, soft #f1f5f9, brand green #16a34a (hover #15803d), blue accent #0ea5e9. * Center container max-width: 1200px, side padding 24px. **Header (sticky):** "Skill Future" logo with 28px green→blue gradient square. Nav: Tutorials, Exercises, Learning Paths, Data Structures, Algorithms, Glossary. Search bar with light gray background, magnifying glass icon, placeholder "Search tutorials...". Burger button hidden on desktop, visible on mobile. **Hero:** Light green→white gradient background. Title clamp 36–64px font-weight 800: "Master the Logic of Code" — last two words with green→blue gradient. Full subtitle. "Start Learning" (green) and "Try Exercises" (ghost) buttons. Popular row with pills: HTML, CSS, JavaScript, Python, SQL. **Features (2×2 grid):** "Learn Everything You Need" + 4 cards (Algorithms, Data Structures, Exercises, Interactive Code Editor) with icons and links. **Resources:** soft gray background, 4 column grid (Top Tutorials, References, Examples, Get Certified). **Dark CTA:** gradient #0f172a → #1e293b, "Get Certified. Get Hired." + green button. **Footer #0f172a:** 4 columns, copyright © 2026, legal links, social icons with green hover. **Responsive:** breakpoint 860px — burger, grids 1 col (footer 2 cols). **UX:** scroll-behavior smooth, hovers 0.2–0.3s, translateY(-4px) on cards. Delivers a single self-contained index.html, without JS.
Landing Pages
3D
scientific congress
3D Scientific Congress with Interactive Posters and Presentation Videos
A virtual scientific congress with a 3D poster hall: each poster is a panel showing an abstract and a presentation video (5-15 min). On proximity, video preview activates; on click, the full presentation plays in an overlay with the paper PDF (PDF.js). Filters by topic area and a favorites system with CSV export. Guided tour mode through relevant posters. Q&A sessions where attendees leave questions anchored to video timestamps. Performance: long videos segmented by chapters, thumbnails and proxies for scrubbing. Accessibility: subtitles, transcripts, aria, prefers-reduced-motion. Metrics: papers viewed, videos played, questions sent. Recommendations for paper metadata and video formats included. **Deliverables:** index.html, styles.css, congress3d.js, assets/ (GLB poster hall models, presentation videos, PDFs). **Stack:** Three.js, video HTML5, PDF.js, GSAP. **Interactions:** Click poster opens video + abstract + PDF, filters by topic, favorites with CSV export, guided tour mode, Q&A anchored to video timestamps.
Landing Pages
3D
tech expo
3D Tech Expo with Video Demos and Interactive Stations
A tech expo where each station shows a technical demo and an explanatory video detailing architecture, APIs and use cases. The scene is a pavilion with thematic islands (AI, security, infra) and a 3D map for navigation. Selecting a station triggers a GSAP fly-to and the demo video plays on a 3D screen; alongside the video a panel shows highlighted code snippets (Prism.js) and a Try in Sandbox button (external link). Demos include live 3D visualizations (data flows) synced with video via JSON cues. Deep dive mode pauses playback and allows inspecting logs and metrics in floating panels. Performance: heavy demos load on demand, Web Workers compatible. Accessibility: subtitles, transcripts, aria on snippets, prefers-reduced-motion. Metrics: demos started, snippets copied, time in deep dive. Sandbox integration and snippet security recommendations included. **Deliverables:** index.html, styles.css, expo3d.js, assets/ (GLB station models, demo videos, JSON snippets). **Stack:** Three.js, video HTML5, Prism.js, GSAP. **Interactions:** Click station opens video + code snippet + sandbox button, 3D map navigation, deep dive mode with logs/metrics, live data visualization synced with video.
Landing Pages
3D
music festival
3D Music Festival with Main Stage, Side Screens and Replay Clips
A 3D music festival experience: main stage with giant screens, low-poly virtual audience, and side screens playing highlight clips (interviews, backstage). The live artist stream projects as a texture on the center screen; main audio routes through WebAudio for stem control (vocals, bass, percussion) in the UI. During the show, users can mark moments generating 10-30s clips stored in a local queue and shareable via UI. Camera angles: front row, side, bird's eye; changing angle applies smooth dolly and adjusts lighting. Real-time reactions (emojis) subtly affect stage lighting and particles. Director mode: replay the concert with free camera and key moment markers. Clip gallery with thumbnails and subtitles. Performance: limit animated avatars, LOD for crowd, adaptive streaming, pause offscreen. Accessibility: live subtitles, transcripts, prefers-reduced-motion. Privacy: explain camera/mic before enabling live interaction. Metrics: clips created, reactions, view time per angle. **Deliverables:** index.html, styles.css, festival3d.js, assets/ (HLS/WebRTC streams, highlight clips, GLB stage models, audio stems). **Stack:** Three.js, HLS.js/WebRTC, WebAudio API, GSAP, postprocessing (bloom). **Interactions:** 3 camera angles (front/side/bird), WebAudio stem control, emoji reactions with particle effects, mark clips with M key, director mode replay with markers, clip gallery, metrics per angle.
Landing Pages
3D
gastronomic fair
3D Gastronomic Fair with Stands, Recipe Videos and Table Reservations
A virtual gastronomic fair with aisles and restaurant stands. Each stand includes a 3D screen playing a recipe video (60-180s) and a panel with menu and a Reserve Table button (UI simulation). On proximity, video preview activates; on click, an overlay opens with extended video, ingredients and delivery order links. Filters by cuisine type reorder stands with 3D animation and a floating map shows stand locations. Includes a guided tasting route: camera moves between selected stands with smooth transitions and voiceover introducing each proposal. Social area where visitors can leave video reviews (locally recorded via WebRTC) displayed on a 3D mural. Recipe videos include subtitles and a downloadable steps list. Performance: proxies for scrubbing, 512-1024px textures, lazy-load videos, release resources after inactivity. Accessibility: subtitles, aria on buttons, prefers-reduced-motion. Analytics: simulated reservations, video plays, filters used. Video compression and menu format recommendations included. **Deliverables:** index.html, styles.css, foodfair3d.js, assets/ (GLB stand models, recipe videos, menu PDFs). **Stack:** Three.js, video HTML5, GSAP, LazySizes. **Interactions:** Click stand opens recipe video + menu + reserve, filters by cuisine reorder stands, floating map, guided tasting route with voiceover, social video reviews, downloadable recipe steps.
Landing Pages
3D
sports
3D Sports Stadium — Video Replay & Free Camera Angles
3D sports event platform combining video replays with free camera angles. A 3D stadium shows real-time action (stream) and lets the user select a replay: the scene loads the clip and the camera can move freely around the field with constraints for realistic perspective. Key play markers generate highlight clips and a timeline with scrubbing; proxies are used for fluidity. Real-time stats overlays (possession, shots) sync with the replay. Social commenting anchored to timestamps. Performance: adaptive streaming, LOD for crowd, pause render on inactive tabs. Accessibility: subtitles, transcripts, prefers-reduced-motion. Metrics: replays viewed, angles selected, comments per timestamp. **Deliverables:** index.html, styles.css, sports3d.js, assets/ (replay clips, highlight chunks, stadium GLB model). **Stack:** Three.js, GSAP, HLS.js (adaptive streaming), WebSocket for live data. **Features:** - Free orbit camera with height/distance constraints. - Replay selection cards trigger video load and camera fly-in. - Timeline with scrubbing and key-play markers. - Real-time stat panel (possession, shots) synced to replay. - Comments anchored to timestamps. - Adaptive streaming via HLS.js. - LOD for crowd dots, pause when tab hidden. - IndexedDB for usage metrics. - prefers-reduced-motion support. - Subtitles & transcripts for accessibility.
Landing Pages
3D
film festival
3D Film Festival — Screening Rooms & Live Q&A with Video
Virtual film festival with multiple 3D screening rooms. Each room projects a film (HLS) with a panel for trailers and extra material. After the screening, a live Q&A session opens via WebRTC with the director; the room shows a panel with audience questions and the moderator selects questions for the live session. Subtitles and transcripts for each film, a favorites system to create a watchlist. The experience includes a lobby with a red carpet showing promo clips and a 3D photobooth for frame capture (image export). Performance: adaptive streaming, trailer preload, pause render when out of viewport. Accessibility: subtitles, transcripts, aria on controls. Metrics: simulated tickets sold, reproductions, Q&A participation. Includes license and exhibition rights recommendations. **Deliverables:** index.html, styles.css, filmfest3d.js, assets/ (films HLS/MP4, trailers, GLB room models). **Stack:** Three.js, HLS.js (adaptive streaming), WebRTC (simulated for Q&A), GSAP. **Features:** - 4 screening rooms with floating label and license info. - Lobby with red carpet and central promo screen. - Room selection triggers camera fly-in and autoplay. - Q&A panel with audience questions and simulated moderator responses. - Photobooth frame capture (PNG export). - IndexedDB for metrics (tickets, reproductions, Q&A). - License/recommendations per film (CC BY, SWANK, MPLC). - Accessibility with aria labels, subtitles, transcripts. - Adaptive streaming via HLS.js principles. - Pause render when tab hidden or out of viewport.
Landing Pages
3D
library
Elegant 3D Library with Educational Video Clips and Semantic Search
Build an elegant 3D library where shelves hold volumes that open to play educational video clips, combined with semantic search to find content by topic, duration, or level. **Deliverables:** index.html, styles.css, library.js, assets/ folder with clips, metadata, thumbnails. **Stack:** Three.js, HTML5 video, Algolia or local semantic search, GSAP. **Description:** 3D library where each shelf contains volumes that, when opened, play educational video clips. The experience combines elegant spatial navigation with semantic search that lets users find clips by topic, duration, or level. **Semantic search:** User types a query; the engine returns results ranked by semantic similarity (embedding) and relevant shelves illuminate in the scene. Results show thumbnails and a snippet; selecting one triggers a fly-to toward the volume and the clip plays. **Clips & metadata:** Each clip has JSON metadata: title, duration, language, transcript, tags. Side panel shows transcript with synchronized highlights (scroll-to-time). SRT subtitles and downloadable transcript option. **Spatial interactions:** Free walk through aisles with orbit/first-person toggle. Quick keyboard focus (keys 1–9) for popular sections. Favorites: drag clip to 3D "cart" to create a playlist. **Playback & quality:** Adaptive streaming when available; preload thumbnails and metadata. Pause playback when user moves away; option to play in background in HTML panel. **Accessibility & fallback:** ARIA on controls, subtitles, transcripts, and 2D version with list and player. prefers-reduced-motion reduces transitions and disables fly-to. **Performance:** Progressive shelf loading; LOD for models; 512–1024px textures. Pause render when canvas off-viewport; requestIdleCallback for non-critical tasks. **Analytics:** Search terms, clips played, average time per clip, most common navigation paths. Camera heatmaps to identify areas of interest.
Landing Pages
3D
fashion
3D Fashion Showroom with Animated Runway and Backstage Videos
Build an elegant 3D fashion showroom with an animated virtual runway, music-reactive lighting, and backstage video clips per garment. **Deliverables:** index.html, styles.css, fashion.js, assets/ folder with GLB garment models, backstage videos, and textures. **Stack:** Three.js, video textures, PBR, GSAP, WebAudio API. **Description:** Elegant 3D showroom where a virtual runway presents collections; selecting a garment plays a backstage video showing the creative process. The runway animates with stylized models and lighting responds to the music. **Runway & video playback:** The runway is a 3D track with looping mannequin models. Clicking a garment zooms the camera in and a side panel plays a backstage clip with subtitles and credits. "Lookbook mode" displays the garment in 360° with a detail video. **Microinteractions & controls:** Hover over garment shows color swatches; click opens spec sheet with video. Backstage video playlist playable in sequence. "Editor mode" to combine garments on a mannequin and export a collage (UI). **Performance:** LOD-optimized GLB models; 1024px PBR textures. 720–1080p videos with preload="metadata"; thumbnails for preview. Pause animations when off-viewport. **Accessibility:** Subtitles and transcripts; alt descriptions for garments. prefers-reduced-motion reduces runway animations. **Metrics:** Video views, interactions per garment, user-created combinations, time in lookbook mode.
Landing Pages
3D
corporate
Elegant 3D Corporate Campus Tour with Explanatory Videos
Build an elegant 3D corporate campus tour with semantic zones, hotspots, and multilingual explanatory videos. **Deliverables:** index.html, styles.css, app.js, assets/ folder with GLB models, HDR textures, MP4 videos, voiceovers, and SRT subtitles. **Stack:** Three.js (CDN), GSAP for transitions, HTML5 video as textures, Draco for GLB compression, IntersectionObserver for lazy-load. **Description:** Immersive 3D tour of a corporate headquarters. Visitors explore zones (reception, auditorium, R&D) and, when activating a hotspot, play a 30–90s explanatory video contextualizing the area — with voiceover and multilingual subtitles. **Scene structure:** GLB building model divided into semantic nodes (lobby, auditorium, lab). Each node has a translucent sphere hotspot with aria-label. Camera starts at a wide view with predefined keyboard-accessible views (1: Lobby, 2: Auditorium, 3: Terrace). **Hotspot activation:** (1) Smooth cinematic fly-to with GSAP easing. (2) Video loads in an HTML overlay panel or as a 3D plane texture. (3) Synchronized SRT subtitles and downloadable transcript. (4) Hotspot displays animated 3D metrics (capacity, projects, years). **Interactions:** Drag to rotate, scroll/pinch to zoom, keyboard for quick views. Touch optimized: double-tap to center, two-finger pinch to zoom. "Start tour" button for full narration with auto-guided hotspot sequence. **Video format:** H.264 MP4 720p for web, optional 1080p for desktop. Each video includes SRT and JSON metadata (duration, language, narrator). Progressive preload: thumbnails first, then adaptive streaming. **Performance:** Draco compression; 512–1024px textures; lazy-load of videos and models per section. Render loop paused when canvas is off-viewport (IntersectionObserver). LOD models, reduced draw calls, optimized requestAnimationFrame. **Accessibility & fallback:** prefers-reduced-motion disables fly-to and particles. 2D fallback: chapter-based hero video with full transcript. All hotspots have aria-label; video panel uses role="dialog" with aria-modal. **Testing & metrics:** Chrome, Safari iOS, Firefox; FPS and TTFB measurement. Track: hotspots activated, videos played, view time. A/B test autoplay tour vs. manual control.
Landing Pages
3D
luxury
3D Luxury Product Gallery with Video Projection and Microinteractions
Build a premium 3D luxury product gallery with proximity-triggered video projection, PBR materials, and rich microinteractions. **Deliverables:** index.html, styles.css, gallery.js, assets/ folder with GLB models, promotional videos, HDRI, and sprites. **Stack:** Three.js, video textures, PBR materials, GSAP for easing, LazySizes for images. **Description:** Premium 3D showcase per product: each display case is a pedestal with soft lighting and an integrated screen that plays a promotional video when the user approaches. Minimalist aesthetic, neutral palette, and serif typography for titles. **Proximity detection:** Distance between camera and showcase center is calculated; crossing a threshold (e.g. 3.5m) triggers a transition — the case illuminates, material gains subtle bloom, and video fades in. **Video integration:** MP4 videos used as textures on a 3D plane inside the showcase. Alternative: HTML overlay panel synchronized with the showcase for accessibility. SRT subtitles rendered in HTML for legibility and searchability. **Microinteractions:** Hover/Focus — pedestal rises 6–10px with soft box-shadow. Click — showcase opens (3D animation) revealing spec sheet with details and extended clip. Drag — product rotation with inertia; double-tap for macro view. **Performance:** LOD-optimized GLB models; 1024px PBR textures. 720p videos with preload="metadata" and adaptive streaming. Pause videos off-viewport; release textures when unused. **Accessibility:** HTML panel with native video controls and aria-describedby. Subtitles and transcripts; alt descriptions for images. prefers-reduced-motion reduces animations and disables auto-rotation. **Navigation & search:** Sidebar with filters (collection, material, year). Filter triggers smooth 3D reorder animation. Breadcrumbs and deep links to share a specific showcase. **Analytics:** Video plays, average view time, rotation interactions, "View spec" clicks. Camera heatmaps to identify most-explored showcases.
Landing Pages
3D
personal brand
3D Personal Brand Experience with Showreel and Microvideos
Build a 3D personal brand experience using a rotating cube portfolio where each face plays a microvideo, with a monochromatic palette and metallic accents. **Deliverables:** index.html, styles.css, personal3d.js, assets/ folder. **Stack:** Three.js, video textures, GSAP. **Description:** Rotating 3D cube acting as a portfolio: each face plays a microvideo (showreel, bio, projects). Smooth rotation with a monochromatic palette and metallic accents. **Key interactions:** Swipe/drag to rotate, click to expand face to fullscreen with subtitles. **Accessibility & fallback:** Linear version with videos and accessible text. **Recommended assets:** 15–45s microvideos, low-poly models, voiceovers.
Landing Pages
3D
typography
3D Cinematic Typography Show with Background Video
Build a cinematic 3D typography show with metallic floating letters reacting to an atmospheric background video. **Deliverables:** index.html, styles.css, type3d.js, assets/ folder. **Stack:** Three.js, HTML5 video, postprocessing. **Description:** Floating 3D letters with metallic finishes; an atmospheric background video modulates the lighting and the letters react to audio with micro-movements. Ideal for elegant brands. **Key interactions:** Video scrubbing to change mood, hover to reveal subtitles or descriptions. **Accessibility & fallback:** Static version with video and alternative text. **Recommended assets:** Atmospheric video, variable fonts, letter models.
Landing Pages
3D
luxury
3D Luxury Product Scene with Video Storytelling
Build a refined 3D luxury product scene with synchronized video storytelling, camera choreography, and particle effects. **Deliverables:** index.html, styles.css, luxury.js, assets/ folder. **Stack:** Three.js, video textures, PBR materials. **Description:** Luxury product on a 3D pedestal; activating "Story" plays a storytelling video that synchronizes camera and particles to create a refined visual narrative. Slow and elegant transitions. **Key interactions:** Play story, switch chapters, subtitles and technical notes. **Accessibility & fallback:** Video with transcript and technical spec sheet. **Recommended assets:** Optional 4K video, high-quality GLB models, HDRI.
Landing Pages
3D
portfolio
3D Portfolio for Creative Studio with Video Reels
Build a 3D portfolio for a creative studio featuring spinning cubes with video reels on their faces and cinematic scroll-triggered transitions. **Deliverables:** index.html, styles.css, portfolio.js, assets/ folder with reels and models. **Stack:** Three.js, video textures, ScrollTrigger. **Description:** 3D cubes that spin and display reels on their faces; as the user scrolls each reel activates and the camera approaches with a cinematic transition. Monochromatic aesthetic with gold accents. **Key interactions:** Scroll-triggered play, click for fullscreen, reel scrubbing. **Accessibility & fallback:** Reel list with subtitles; accessible playback controls. **Recommended assets:** 720–1080p reels, low-poly models.
Landing Pages
3D
interview
3D Interview Room with Video Replays and Synchronized Annotations
Build an elegant 3D interview review room where each recorded interview appears as a card on a table; opening a card plays the video replay with synchronized 3D annotations. **Deliverables:** index.html, styles.css, interviewRoom.js, assets/ folder with recordings, transcripts, and models. **Stack:** Three.js, WebRTC for recording, video playback, GSAP. **Description:** An elegant 3D environment for reviewing recorded interviews. Each interview is represented as a floating card on a table; opening it plays the video replay and the interviewer's annotations appear synchronized in 3D as floating notes. **Annotation sync:** Annotations have timestamps; as the video plays, notes appear and position themselves in 3D space with animation. The user can add new annotations that save with timestamp and relative position. **Controls & exports:** Play/pause, jump to annotation, export PDF summary with timestamps and highlighted clips. Side-by-side comparator for viewing two interviews simultaneously with synchronized videos. **Privacy & permissions:** Request recording permission; encrypt recordings at rest; option to anonymize audio/video for sharing. **Accessibility:** Auto-captions and editable transcripts; ARIA on controls.
Landing Pages
3D
wellness
3D Interactive Wellness Garden with Meditation Videos and Ambient Sound
Build a serene 3D interactive garden where the user explores paths and, at rest points, plays wellness videos (guided breathing, micro-meditations). The scene reacts to audio with light changes and soft particles. **Deliverables:** index.html, styles.css, garden.js, assets/ folder with meditation videos, ambient audio tracks, and models. **Stack:** Three.js, video textures, Howler.js for audio, GSAP. **Description:** A serene 3D garden environment where users explore winding paths and discover rest spots (bench, fountain, stone circle). Each spot plays a 3-5 minute wellness video. When a session starts, the camera centers on the spot and the rest of the scene dims for focus. **Session activation:** Approaching a rest spot shows a panel with the video clip; starting it centers the camera and dims the surrounding scene. Duration controls, subtitles, and volume included. **Audio reaction:** The scene lighting and particles gently pulse in response to the ambient audio track, creating a calm, immersive atmosphere. **Accessibility & privacy:** Transcripts and subtitles included; audio-only mode (no voice, just music). No user audio recording or transmission. No special permissions needed. **Performance:** 720p videos, streaming audio, LOD for vegetation, culling for particles.
Landing Pages
3D
recording studio
3D Recording Studio with Session Videos and Interactive Mixing
Build a 3D recording studio where each track is an interactive object; dragging a track to the central console plays its session video and the user can adjust mix (3D faders) with real-time visual response. **Deliverables:** index.html, styles.css, studio3d.js, assets/ folder with recorded sessions, equipment models, and stems. **Stack:** Three.js, WebRTC for recording, WebAudio API, Howler.js. **Description:** A 3D recording studio where each track is an interactive 3D object. Dragging a track to the central console plays its session recording video. The user adjusts mix levels with real-time visual feedback via 3D faders. **Recording & replays:** WebRTC recordings stored as MP4; replays synchronized with current mix. Timestamp annotations and stem export. **Collaborative controls:** Real-time multiuser (WebRTC + signaling) with permissions; chat and shared notes. Version review with timeline and markers. **Privacy & performance:** Encrypted recordings; compressed stems; LOD for equipment models.
Landing Pages
3D
innovation
3D Innovation Garden — Guided route showcase
A route-led innovation garden focused on curated pathways, thematic wayfinding, and project discovery. A route-first innovation garden experience with guided paths and thematic storytelling. Build a 3D innovation garden where each "plot" represents a project; walking themed routes (sustainability, AI, health) plays project videos and the camera guides the user with smooth transitions. **Deliverables:** index.html, styles.css, innovationGarden.js, assets/ folder with project videos, models, and maps. **Stack:** Three.js, HTML5 video, GSAP, search index. **Description:** An elegant 3D environment where each plot represents an innovation project. Themed routes guide the user through related projects with smooth camera transitions and video playback. **Routes & projects:** Predefined routes with waypoints; each waypoint has a video, technical sheet, and links. "Curator" mode selects featured projects and plays a sequence with voiceover. **Interactions:** Walk, fly, or auto tour; interest markers; create a playlist of favorite videos. Shareable links with timestamp and waypoint. **Accessibility & performance:** Subtitles, transcripts, prefers-reduced-motion, LOD and lazy-load of videos.
Landing Pages
3D
tech product
3D Tech Product Scene with Video Demo and Technical Hotspots
Build a 3D tech product scene on a pedestal with technical hotspots; each hotspot opens a video demo showing integration, API calls, and use cases. The camera moves smoothly to focus on the active hotspot. **Deliverables:** index.html, styles.css, tech3d.js, assets/ folder with demo videos, models, and documentation. **Stack:** Three.js, HTML5 video, Prism for snippets, GSAP. **Description:** A tech product on a 3D pedestal with interactive hotspots. Each hotspot opens a video demo with synchronized code snippets. Camera smoothly focuses on the active hotspot. **Snippets & video integration:** Video in overlay with subtitles; highlighted code snippets alongside the video. "Copy snippet" button and sandbox link. **Accessibility & fallback:** Transcripts, ARIA on hotspots, 2D version with videos and documentation.
Landing Pages
3D
product gallery
3D Light Mode Product Gallery with Video Projection and Filters
Build a light mode 3D product gallery with editorial aesthetic: off-white background, soft shadows, and sans-serif typography with light tracking. Rows of minimal white matte pedestal showcases with light marble base. Each showcase holds a 3D product and an integrated screen that plays a promo video. Proximity detection triggers lighting animation and video fade-in. Filters reorder showcases with GSAP easing and stagger. **Deliverables:** index.html, styles.css, gallery3d.js, assets/ folder with GLB models, promos, HDRI, WebP thumbnails. **Stack:** Three.js, video textures, PBR materials, GSAP, LazySizes for images. **Description:** A light mode editorial 3D gallery. Proximity (Euclidean distance) activates video playback with lighting response. Videos as 3D textures + HTML overlay. Filters reorder showcases with GSAP stagger. Product rotation with inertia. Double-tap for macro view with simulated DOF. Technical sheet modal with extended video, specs, color variants, "Request sample" button. **Performance:** PBR textures 512-1024px, WebP thumbnails, on-demand video loading, video cache with 30s inactivity release. **Accessibility & fallback:** HTML panel with native video controls, SRT subtitles, aria-describedby on cards, prefers-reduced-motion. 2D fallback thumbnail gallery with player.
Landing Pages
3D
corporate
3D Light Mode Corporate Campus Tour with Explanatory Videos
Build a light mode 3D corporate campus tour with a luminous minimal palette, pale gold and sky blue accents, and soft global HDRI daylight illumination. The GLB campus model is segmented by semantic zones: lobby, auditorium, lab, terrace, cafeteria. Each zone has a translucent spherical 3D hotspot with subtle border and projected shadow. Camera starts in a wide aerial view with a floating "Start tour" button. **Deliverables:** index.html, styles.css, app.js, assets/ folder with GLB models, HDR textures, MP4 videos, SRT subtitles. **Stack:** Three.js (CDN), GSAP for transitions, HTML5 video as textures, Draco for GLB compression, IntersectionObserver for lazy-load. **Description:** A bright, minimal 3D tour of a corporate headquarters with 5 semantic zones. Clicking a hotspot triggers a cinematic fly-to (GSAP, 800-1200ms) and loads an explanatory video in a semi-transparent white overlay panel with rounded corners. Video includes synchronized SRT subtitles and a toggle between 3D texture projection and HTML overlay. Animated metrics appear on the hotspot during playback. **Interactions:** Drag to rotate, scroll/pinch to zoom, number keys 1-5 for predefined views. Auto-tour mode with voiceover and chapter markers. Progressive video loading (WebP thumbnails, 720p H.264, 480p fallback). LOD for buildings, culling for vegetation. **Accessibility & fallback:** SRT subtitles, downloadable transcript, role="dialog" on video panel, prefers-reduced-motion reduces fly-to. 2D fallback with hero video and chapters.
Landing Pages
3D
fashion
3D Light Mode Fashion Showroom with Runway and Backstage Videos
A light mode fashion showroom with a marble runway and cream walls. The runway is a 3D track where stylized mannequins walk in loop; each mannequin is linked to a garment with metadata. Selecting a garment triggers a camera dolly and a side panel plays a backstage video showing the creative process, interviews, and garment details. Video includes subtitles and credits. Runway has dynamic lighting synced to the audio track: BPM analysis adjusts key light intensity and color smoothly. Lookbook mode lets the user stop the runway and spin the garment 360° with macro zoom control. A 'Mix' button opens a 3D editor where the user drags garments onto a mannequin and exports a collage as an image. Mannequin animations use simple skeletons and optimized morph targets. Backstage videos load on demand and play in an HTML overlay with optional 3D screen texture projection. **Deliverables:** index.html, styles.css, fashion3d.js, assets/ (GLB models, backstage videos, PBR textures, SRT subtitles, transcripts). **Stack:** Three.js, video textures, PBR materials, GSAP, WebAudio API. **Interactions:** Garment selection triggers backstage video, lookbook 360°, mixer editor with collage export, lighting synced to audio.
Landing Pages
3D
timeline
3D Light Mode Timeline with Animated Dioramas and Video Narration
A 3D timeline in light mode with a floating horizontal line and minimalist dioramas on light pedestals. Each milestone has a GLB diorama representing an event and a 60-120s narrated video. Scrolling moves the camera between milestones with cinematic easing; arriving at a milestone auto-plays the video on a 3D panel or HTML overlay and local lighting changes to emphasize the scene. Videos include JSON metadata with start, end, chapterTitle, cameraCue and lightingCue. The timeline allows scrubbing and chapter skipping; scrubbing uses low-res proxies for fluidity and loads high quality on stop. Each diorama has hotspots for micro-videos and downloadable PDFs. Curator mode plays a predefined sequence with voiceover and visual markers. Performance: LOD for dioramas, 512px textures, on-demand video loading. **Deliverables:** index.html, styles.css, timeline3d.js, assets/ (diorama GLBs, narrated videos, SRT subtitles, transcripts, JSON metadata). **Stack:** Three.js, video HTML5, GSAP Timeline, ScrollTrigger. **Interactions:** Scroll-triggered camera, auto-play video per milestone, hotspots with micro-videos, curator mode.
Landing Pages
3D
photography
3D Light Mode Photography Portfolio with Video Projections
A light mode photography portfolio where floating panels act as canvasses projecting short video clips. Editorial aesthetic: white background, thin warm-gray frames, serif typography for titles. On entry, the camera does a gentle pan across the gallery; approaching a panel plays the clip with fade-in and shows a metadata card with title, year, gear, and author notes. Clips are short 4–12s loops optimized for web. Horizontal scrubbing on a panel advances the clip frame-by-frame. A 'Behind the Scenes' button opens an extended video in overlay. Panels can be grouped by series; selecting a series reorders the camera with animation and a subtle parallax between layers. Accessibility: clips include captions when voice is present, plus a transcript and text descriptions. The system pauses out-of-viewport clips and releases textures after 60s of inactivity. **Deliverables:** index.html, styles.css, photo3d.js, assets/ (clips, textures, panel models, SRT subtitles, transcripts). **Stack:** Three.js, video textures, GSAP, LazySizes. **Interactions:** Hover/approach plays clip, frame-by-frame scrubbing, series grouping, extended video overlay.
Landing Pages
3D
data
3D Light Mode Data Visualizer with Video Insights and Comparator
A 3D dashboard in light mode with floating widgets on a light plane. Each widget is a 3D object showing a visualization; selecting it plays a video insight that explains the trend. Two periods can be compared by activating comparator mode: the camera visually splits and plays two synced videos side by side while visualizations animate differences with particles and interpolated lines. Insight videos are 60-180s narrations with subtitles and embedded graphics; playing them expands the widget and shows 3D details. Synchronized scrubbing between video and data visualization; scrubbing interpolates data and updates 3D animations in real time. Live data via WebSocket with smoothing to prevent jumps. Controls for exporting snapshots and generating short insight clips with timestamps. Performance: widget instancing, 512px textures, on-demand video loading. **Deliverables:** index.html, styles.css, data3d.js, assets/ (insight videos, JSON datasets, widget models, SRT, transcripts). **Stack:** Three.js, D3.js, video HTML5, WebSocket. **Interactions:** Widget selection plays insight, synchronized comparator, scrubbing updates visualization.
Landing Pages
3D
conference
3D Light Mode Conference Room with Streaming and Highlight Clips
A light mode conference room with cream seats, a large central screen, and side panels for highlight clips. The main stream plays on the central screen via HLS; highlight clips play on side panels as 3D textures or HTML overlays. The camera offers predefined angles: stage, audience, and side view; the user can switch with smooth transitions. During the event, moderators can mark key moments that generate highlight clips; these appear in a side list and can be replayed with one click. Live captions when supported. A 'replay' function plays the selected segment with free camera and markers. Social reactions subtly affect lighting and particles. Performance: adaptive buffering, low resolution on mobile, pauses 3D render when tab is hidden. 2D-only stream option for slow connections. **Deliverables:** index.html, styles.css, conference3d.js, assets/ (HLS streams, highlight clips, room models, SRT, transcripts). **Stack:** Three.js, HLS.js, video textures, postprocessing. **Interactions:** Camera angle switching, clip replay, real-time reactions, 2D stream fallback.
Landing Pages
3D
library
3D Light Mode Educational Library with Clips and Semantic Search
A 3D library in light mode with light-wood shelves containing educational clip volumes. Semantic search allows natural language queries; results illuminate relevant shelves and the camera flies to the clip. Each clip has rich metadata: title, duration, language, transcript, tags, difficulty. Selecting a clip plays it on a 3D panel and the transcript syncs with highlights that jump to timestamps. Playlists by dragging clips to a 3D cart. 'Mark for review' adds personal notes with timestamps. Adaptive streaming, thumbnails and proxies for fast scrubbing. High-contrast mode and adjustable text size. Scene optimized with LOD for shelves and lazy-load by section. Analytics tracks frequent searches, top clips, and navigation paths. **Deliverables:** index.html, styles.css, library3d.js, assets/ (clips, metadata JSON, thumbnails, SRT, transcripts). **Stack:** Three.js, video HTML5, GSAP, local embedding search. **Interactions:** Semantic search illuminates shelves, fly-to clip, 3D playlists, scrubbing with proxies.
Landing Pages
3D
tech showroom
3D Tech Showroom — Product proof lab
A product-proof showroom focused on demos, technical validation, and conversion-oriented storytelling. A lab-style showroom focused on product proof, technical storytelling, and interactive code snippets. A deep-dive showroom for product demos, technical proof, and interactive code snippets. A tech showroom in light mode with a product on a pedestal. Technical hotspots surround the product; activating one plays a video demo showing integration, API calls, and use cases. The video syncs with product animation — e.g., an auth API demo triggers an animated login flow on the 3D product interface. A code snippet panel with Prism.js syntax highlighting, copy button, and sandbox link. Deep Dive mode pauses global animation and lets users inspect product internals with explanatory overlays and microvideos. Shareable links include timestamp and active hotspot. Assets: 720p videos, GLB models with LOD, preloaded snippets. Accessibility: transcripts, aria on hotspots, prefers-reduced-motion, 2D version. **Deliverables:** index.html, styles.css, techshowPro.js, assets/ (GLB models, demo videos, snippets JSON). **Stack:** Three.js, video HTML5, Prism.js, GSAP. **Interactions:** Hotspot activates video demo and synced animation, interactive snippets, Deep Dive mode, shareable links.
Landing Pages
3D
corporate library
3D Corporate Library — Training and onboarding pro
A training and onboarding library with structured playlists, clips, and internal search. A training-focused corporate library with playlists, onboarding clips, and search. Enhanced corporate library in light mode with shelves organized by department (IT, RH, Finances, Marketing). Each training clip has metadata and a panel with video, subtitles, timestamped notes, and completion tracking. Algolia-like full-text search with relevance ranking. Filters by duration, department, and level. Fly-to camera on clip selection. Timestamped notes saved in IndexedDB, exportable to TXT. Playlist system for curating training sequences. Scrubbing with proxy thumbnail previews. Adaptive streaming. Accessibility: subtitles, transcripts, prefers-reduced-motion support, 2D fallback view. Metrics: completion rate, average time per clip, most frequent notes. LOD and lazy-load per shelf. **Deliverables:** index.html, styles.css, corpLibraryPro.js, assets/ (metadata JSON, WebP thumbnails). **Stack:** Three.js, video HTML5, Algolia-like local search engine, GSAP, IndexedDB. **Interactions:** Semantic search and fly-to, timestamped notes, training playlists, scrubbing with proxy previews, completion tracking.
Landing Pages
3D
corporate library
3D Corporate Library — Docs and learning hub
A docs-first learning hub optimized for references, clips, and discovery. A learning hub version of the corporate library optimized for docs, references, and discovery. A learning hub version of the corporate library focused on docs, clips, and discovery. A corporate library in light mode with shelves organized by department (IT, RH, Finances, Marketing). Each training clip has metadata and a panel that plays the video with subtitles and synchronized notes. Keyword search and filters by duration, department, and level. Selecting a result flies the camera to the shelf and plays the clip. Personal note system linked to timestamps, saved in IndexedDB and exportable. Adaptive streaming, thumbnails and proxies for scrubbing. Accessibility: subtitles and full transcript per clip. Performance: LOD and lazy-load per shelf. Metrics: completion rate, average time per clip, most frequent notes. **Deliverables:** index.html, styles.css, corpLibrary3d.js, assets/ (training clips, metadata JSON, thumbnails, SRT, transcripts). **Stack:** Three.js, video HTML5, GSAP, local search engine. **Interactions:** Search and fly-to, timestamped notes, training playlists, scrubbing with proxies.
Landing Pages
3D
innovation garden
3D Innovation Garden — Project tour trails
A tour-led innovation garden designed around project videos, plot-by-plot storytelling, and zone transitions. A tour-led innovation garden experience highlighting project videos and movement through zones. An innovation garden in light mode with gravel paths, stylized vegetation, and themed plots by route (AI, Sustainability, Health). Each plot has a pedestal with a 3D video screen that plays project videos as textures. Routes can be followed with an auto tour that moves the camera and plays voiceover narration. Each project includes video, technical sheet, and resource links. A curator system creates playlists of favorite projects and exports as PDF. Videos load on demand and play in HTML overlay with subtitles. Waypoint sharing via URL with camera fly-to. Analytics track route starts and project views. LOD for vegetation, prefers-reduced-motion, 2D fallback view. **Deliverables:** index.html, styles.css, innovationGardenTours.js, assets/ (project videos, GLB models, SRT, transcripts). **Stack:** Three.js, video HTML5, GSAP, IndexedDB, SpeechSynthesis. **Interactions:** Auto tour by route with voiceover, video playback with 3D texture projection, project playlists, PDF export, shareable waypoints.
Landing Pages
3D
personal brand
3D Light Mode Personal Brand Experience with Showreel and Microvideos
A personal brand portfolio in light mode with a rotating cube where each face plays a microvideo: bio, projects, testimonials, contact. Smooth rotation responds to swipe/drag; clicking a face expands the cube and plays the microvideo fullscreen with subtitles. A project timeline displays case study videos with scrubbing. Pitch mode plays a sequence of microvideos with voiceover and typographic animations. Shareable links with timestamp and active face. Mobile optimized with 720p videos and scrubbing proxies. Accessibility: subtitles, transcripts, prefers-reduced-motion, 2D fallback. **Deliverables:** index.html, styles.css, personalShow3d.js, assets/ (microvideos, low‑poly models, voiceovers). **Stack:** Three.js, video textures, GSAP. **Interactions:** Rotating cube with microvideos, expand to fullscreen, project timeline, Pitch mode.
Landing Pages
3D
tech
3D Tech Showroom — SDK integration guide
A developer-facing showroom centered on SDK implementation, APIs, and integration guidance. A developer-first showroom focused on SDK integrations, API flows, and implementation guidance. A developer-focused showroom landing centered on SDK flows, hotspots, and integrations. A light mode tech showroom where a product sits on a light pedestal. Technical hotspots surround the product; activating one plays a demo video showing integration, API calls and use cases. The video syncs with product animation: for example, showing an auth API makes the product's 3D interface display an animated login flow. Includes a code snippet panel with syntax highlighting and 'Copy'/'Sandbox' buttons. A 'Deep Dive' mode pauses global animation and lets users inspect product internals with explanatory overlays and micro-videos. Shareable links with timestamp and active hotspot. **Deliverables:** index.html, styles.css, techshow3d.js, assets/ (GLB models, demo videos, JSON snippets, SRT). **Stack:** Three.js, video HTML5, Prism.js, GSAP. **Interactions:** Hotspot activates video demo and synced animation, interactive snippets, Deep Dive mode.
Landing Pages
3D
freelance
3D Interactive Freelance Portfolio with Showreel and Microvideos
A freelance portfolio in light mode with a central 3D cube that acts as a content container: each face plays a microvideo (bio, projects, testimonials, contact). On load, the camera does a smooth dolly‑in (1.2s easeOutCubic). The cube rotates slowly idle; the user can drag it with inertia and rotation limits. Clicking a face expands it into a 3D panel that separates from the cube and plays the microvideo in high resolution with SRT subtitles. The panel shows metadata (date, role, tools) and a "View full case" button that opens a modal with an extended video and image gallery. Frame‑by‑frame scrubbing on microvideo via horizontal gesture; uses a low‑res proxy during scrub. A project timeline lets users select a project and fly‑to (900ms) a 3D showcase vitrine with project assets (mockups, screenshots) and a synchronized case study video with 3D animations (halos, guide lines). Videos include SRT and downloadable transcripts. Performance: low‑poly models, Draco compression, 512–1024px textures, lazy‑load, texture release after 30s inactivity. IntersectionObserver pauses render. Accessibility: native video controls, aria‑label, prefers‑reduced‑motion stops auto‑rotation. Analytics: plays, avg time, rotation interactions, case clicks. **Deliverables:** index.html, styles.css, app.js, assets/ (GLB models, MP4s, WebP thumbnails, audio stems). **Stack:** Three.js, GSAP, WebAudio API, video HTML5. **Interactions:** Cube with microvideos, expand panel with SRT, frame‑by‑frame scrub, timeline fly‑to, 3D vitrine with animated halos.
Landing Pages
3D
videographer
3D Freelance Studio for Videographer with Reels and Interactive Timeline
A 3D studio for a freelance videographer. The scene simulates a studio with floating monitors on a curved wall; each monitor is a 3D plane playing a reel in loop (10–30s). On hover or approach, the reel expands with playback controls and subtitles. A global timeline at the bottom allows scrubbing between reels — moving the scrubber slides the camera laterally along the wall and plays the active reel in high resolution. "Session replay": users select multiple clips and generate a compiled video UI with preview and JSON download (order and timestamps). "Director mode": overlays with metadata (camera, lens, settings) and BTS microvideos in a side panel. Performance: proxies for scrubbing, preload thumbnails, release textures after 60s inactivity. Accessibility: subtitles, transcripts, aria on controls. Analytics: most viewed reels, average view time, compilations created. **Deliverables:** index.html, styles.css, studio.js, assets/ (reels MP4, thumbnails, models). **Stack:** Three.js, video textures, GSAP. **Interactions:** Timeline scrub slides camera along curved monitor wall, session replay JSON export, director mode with BTS microvideos.
Landing Pages
3D
showroom
3D Freelance Showroom for Product Designer with Promotional Videos
An elegant 3D showroom for a freelance product designer. Minimalist scene with marble floor and neutral walls; a rotating pedestal holds the product (GLB model). Approaching via drag or "View detail" button triggers a camera animation (800–1000ms) with simulated DOF and higher model resolution. Each product has an integrated screen in its base playing a promotional video as a 3D texture and HTML overlay for accessibility. Video starts on approach or play button click. Technical hotspots around the product (materials, dimensions, process) deploy microvideos (10–30s) and 3D animations showing section cuts or morphs. A variant selector changes PBR textures in real time with 300ms crossfade. On mobile, macro view activates with double-tap, rotation limited to 180° to prevent context loss. Performance: LOD models, 512–2048px textures by device, adaptive video streaming, release textures/stop video when out of viewport. Accessibility: SRT subtitles, aria‑describedby on hotspots, native video controls. Analytics: plays per variant, macro view time, hotspot clicks. **Deliverables:** index.html, styles.css, showroom.js, assets/ (GLB models, promo videos, HDRI, PBR textures). **Stack:** Three.js, PBR materials, GSAP, video HTML5. **Interactions:** Camera approach with DOF, variant crossfade, hotspot microvideos with section cut animation, double-tap macro on mobile.
Landing Pages
3D
freelance
3D Freelance Landing Page for Web Developer with Interactive Demo and Video Tutorial
A 3D landing page for a freelance web developer featuring an interactive product mockup in a 3D panel. Pressing 'Play demo' plays a tutorial video synchronized with the mockup: the video explains steps and the mockup executes animations (opening menus, simulating API calls) in real time. The video acts as a master clock sending JSON cues that GSAP interprets to animate the mockup. An 'Explore' mode lets users manipulate the mockup manually; the video pauses and an overlay shows textual explanations. Code snippets highlighted with Prism.js appear alongside the video; a 'Copy' button copies the snippet to clipboard. On mobile, the mockup simplifies and the video plays in overlay. Proxy versions for scrubbing, LOD for the mockup, texture release on inactivity. Accessibility: subtitles, aria on buttons, prefers-reduced-motion. Analytics: demo plays, snippets copied, mockup interactions. **Deliverables:** index.html, styles.css, dev3d.js, assets/ (demo videos, models, code snippets). **Stack:** Three.js, video HTML5, Prism.js, GSAP. **Interactions:** Play demo with video-mockup sync, explore mode with manual mockup manipulation, copy code snippets.
Landing Pages
3D
illustrator
3D Portfolio for Freelance Illustrator with Video Projections and Macro Zoom
A 3D gallery for a freelance illustrator. Floating panels in a 3D grid project short video clips showing timelapse process or subtle animations. On approach, the panel elevates 8–12px and the clip plays with fade‑in. Macro zoom: double‑click on a panel activates a macro camera allowing frame‑by‑frame scrubbing of the timelapse and shows layers (sketch, lineart, color) as toggles that overlay with blending. The user can export a frame as PNG (downloads generated canvas image). Filters by technique and project; applying a filter reorders panels with 3D animation and stagger. Proxy video versions used for scrubbing, high quality for full playback. Accessibility: captions for voice clips, transcripts, prefers‑reduced‑motion. Analytics: most played clips, frames exported. **Deliverables:** index.html, styles.css, gallery.js, assets/ (clips, images, panel models). **Stack:** Three.js, video textures, GSAP, LazySizes. **Interactions:** Hover/approach plays clip, macro zoom with frame scrubbing, layer toggles, export PNG, filters with 3D stagger animation.
Landing Pages
3D
portfolio
3D Freelance Portfolio for Motion Designer with Showreel Projections and Stem Control
A 3D space where panels project showreels and the user controls audio stems (music, sfx, voice). Selecting a reel opens a panel with sliders for stem volume and effect parameters (reverb, delay) that affect playback in real time. The scene reacts to audio with 3D visualizers (particles, bars) synchronized by FFT. Scrubbing and chapter markers for each reel. A 'Deconstruct' mode shows project layers (assets, timeline) with microvideos explaining the process. Audio buffers and resource release on inactivity. Accessibility: subtitles, transcripts, prefers-reduced-motion. Analytics: most adjusted stems, reels played. **Deliverables:** index.html, styles.css, motion3d.js, assets/ (showreels, stems, models). **Stack:** Three.js, WebAudio API, video HTML5, GSAP. **Interactions:** Click reel opens stem mixer, FFT-reactive particles and bars, deconstruct mode with project layers and microvideos.
Landing Pages
3D
wedding
3D Freelance Wedding Photography Experience with Reels and Event Timeline
A 3D immersive wedding timeline. The scene is a hallway with pedestals representing key moments (ceremony, vows, first dance). Each pedestal plays a reel or slideshow; clicking a pedestal triggers a camera fly‑to and plays an extended video with subtitles and credits. A bottom timeline allows scrubbing by event hour; moving the scrubber slides the camera laterally and activates pedestals in sequence. A 'Highlight Reel' function lets clients mark timestamps and generate a JSON playlist. Proxy videos for scrubbing, high quality for full playback. Accessibility: subtitles, transcript of vows, prefers-reduced-motion. Analytics: most viewed clips, time spent at each pedestal. **Deliverables:** index.html, styles.css, wedding3d.js, assets/ (reels, photos, audio). **Stack:** Three.js, video textures, WebAudio API, GSAP. **Interactions:** Timeline scrub moves camera along pedestal hallway, click pedestal opens extended video, highlight reel playlist export.
Landing Pages
3D
UX
3D Freelance Portfolio for UX/UI Designer with Interactive Mockup and Video Walkthrough
A 3D landing showing 3D interface mockups. Pressing 'Play walkthrough' plays a synchronized video that guides the camera through the mockup and highlights interactions (hover, click, transitions). The video sends cues to animate overlays and tooltips on the mockup. An 'Inspect' mode pauses the walkthrough and lets users interact with components; resuming continues from the current timestamp. Code snippets and links to interactive prototypes are included. Proxy videos for scrubbing, LOD for mockup. Accessibility: subtitles, aria on controls. Analytics: walkthroughs completed, mockup interactions. **Deliverables:** index.html, styles.css, ux3d.js, assets/ (mockup GLB, walkthrough videos, screenshots). **Stack:** Three.js, video HTML5, Prism.js, GSAP. **Interactions:** Play walkthrough with tooltip cues and element highlights, inspect mode with component hover and code snippets, click to cycle projects.
Landing Pages
3D
consultant
3D Freelance Landing for Consultant with Case Room and Testimonial Videos
A 3D boardroom where each table contains a case study represented by a 3D card. Opening a card plays a client testimonial video and shows animated metrics (ROI, implementation time). A 'Compare' mode places two cases side by side with synced videos to show differences. A resource panel offers downloadable PDFs and an accessible contact form. Proxy videos for scrubbing, LOD for furniture, texture release on inactivity. Accessibility: subtitles, transcripts, aria on cards. Analytics: testimonials viewed, comparisons made. **Deliverables:** index.html, styles.css, consult3d.js, assets/ (testimonials, models, PDFs). **Stack:** Three.js, video HTML5, GSAP, LazySizes. **Interactions:** Click card opens testimonial with metrics, compare two cases side by side, contact form, PDF download.
Landing Pages
3D
coach
3D Freelance Landing for Coach with Session Room and Guided Videos
A calm 3D room where each station offers a guided session (mindfulness, productivity). Starting a session centers the camera and dims the rest of the scene; the video plays with subtitles and a 3D countdown showing remaining time. Duration controls and option to download transcript. For privacy, no user recording; live coaching explains permissions before activating camera/mic. 720p videos, LOD for vegetation, release textures. Accessibility: subtitles, transcripts, prefers-reduced-motion. Analytics: sessions started, average time. **Deliverables:** index.html, styles.css, coach3d.js, assets/ (guided videos, audio, models). **Stack:** Three.js, video HTML5, Howler.js, GSAP. **Interactions:** Click station starts guided session with timer and transcript download, live coaching with camera permission dialog.
Landing Pages
3D
writer
3D Writer Library — Readings and references
A writer-centric library for references, readings, and structured reading paths. A 3D library where each book projects a reading clip (video or audio). Selecting a book zooms the camera in and plays the reading with subtitles and synchronized highlighted text. A 'Live Reading' mode connects to a WebRTC stream (optional) or plays a recording. A panel shows excerpts and buy/download links. Proxy videos for scrubbing, LOD for shelves. Accessibility: subtitles, transcripts, descriptions. Analytics: readings played, excerpts downloaded. **Deliverables:** index.html, styles.css, writer3d.js, assets/ (reading clips, text snippets, models). **Stack:** Three.js, video HTML5, Howler.js, GSAP. **Interactions:** Click book opens reading with synced text highlight, live reading mode, download excerpts.
Landing Pages
3D
translator
3D Translator Library — Voice and language
A language-first library for voice notes, translations, and multilingual content. A 3D library where each shelf contains translation examples and voice clips in different languages. Selecting an example plays the original clip and translation in audio, with synchronized subtitles and parallel text. A side-by-side comparator shows original and translation with synced scrubbing. A form allows requesting custom samples. Proxy videos for scrubbing, LOD for shelves. Accessibility: subtitles, transcripts, aria. Analytics: most requested languages, clips played. **Deliverables:** index.html, styles.css, translator3d.js, assets/ (voice clips, transcripts, models). **Stack:** Three.js, Howler.js, video HTML5, GSAP. **Interactions:** Click shelf opens original + translated audio with parallel text, compare mode with synced audio players, request custom sample form.
Landing Pages
3D
trade fair
3D Immersive Trade Fair with Pavilions and Product Videos
A virtual trade fair in light professional mode: a 3D venue with aisles, stands and a central atrium. Each stand is a GLB module with exhibitor branding and an integrated screen playing a promo video (30-90s). Camera starts in the atrium with a floating 3D map with hotspots to jump to pavilions by category. Navigation combines orbit controls for free exploration and a guided tour mode with cinematic fly-to (GSAP easeOutCubic, 900ms). Three interaction levels per stand: preview (thumbnail + muted audio loop), panel (HTML overlay with video, spec sheet and CTA), and demo (extended video projected as texture on a 3D plane inside the stand). Proximity activates preview: when camera is within 3.5m, thumbnail expands and video fades in. Videos include SRT and JSON metadata (title, duration, language, contact). Meeting system: visitor can request a live demo; UI generates a request (no backend) and marks the stand with an icon. Performance: LOD for stands, 512-1024px textures, lazy-load videos, pause render when canvas offscreen. Accessibility: SRT subtitles, role=dialog on overlays, prefers-reduced-motion reduces fly-to and particles. Analytics: play events, time in stand, demo requests. **Deliverables:** index.html, styles.css, fair3d.js, assets/ (GLB pavilion models, MP4 videos, WebP thumbnails, JSON metadata). **Stack:** Three.js, GSAP, HLS.js, video HTML5 textures, Draco GLB compression, IntersectionObserver. **Interactions:** Click stand opens panel with video + spec sheet + CTA, proximity triggers preview, guided tour mode, map hotspots, meeting request with marker, demo extended mode.
Landing Pages
3D
consultant
3D Freelance Portfolio for Creative Consultant with Case Room and Workshop Videos
A 3D room where each table represents a workshop given by the creative consultant. Opening a table plays the workshop video with subtitles and attached materials (PDFs, slides). Includes a replay mode with scrubbing by sections (introduction, exercises, Q&A) and a synchronized notes panel that can be exported. Bookmark system by timestamp and auto summary generation (UI that prepares the package; actual generation can be delegated to backend). Proxies for scrubbing, LOD for furniture. Accessibility: subtitles, transcripts, prefers-reduced-motion. Analytics: workshops viewed, bookmarks created. **Deliverables:** index.html, styles.css, consultant3d.js, assets/ (workshop videos, models, PDFs). **Stack:** Three.js, video HTML5, GSAP, LazySizes. **Interactions:** Click table opens workshop panel with video + sections + notes + attachments bookmark at timestamp export notes generate summary package.
Landing Pages
3D
coworking
3D Coworking Seating Map with Desk Previews and Reservations
An interactive 3D map of a coworking space showing hot-desks, dedicated desks and private offices. Each desk is a 3D object with metadata (number, capacity, outlets, monitor) and an 8-15s video preview showing desk views, lighting and ergonomics. Users can filter by type (hot-desk, dedicated, private), amenity (monitor, ergonomic chair) and availability; filters reorder and highlight desks with staggered 3D animation. Selecting a desk triggers a 700-900ms GSAP fly-to and the preview video plays on a 3D panel beside the desk; an HTML overlay shows price per hour/day, availability calendar and a Reserve button (UI simulation). Horizontal scrubbing over the preview for frame seeking, and a day/night toggle that morphs scene lighting. Performance: scrubbing proxies, high-quality on-demand releases textures after 30s inactivity. Accessibility: aria-labels on all desks, keyboard-accessible calendar with aria-live confirmations, prefers-reduced-motion reduces animations. Analytics: desks viewed, reservations started, filters used. Backend sync and video format recommendations included. **Deliverables:** index.html, styles.css, seatingMap3d.js, assets/ (GLB desk models, MP4 short desk videos, JSON availability). **Stack:** Three.js, video HTML5, WebSocket, GSAP. **Interactions:** Click desk opens panel with video preview + price + calendar + reserve, filters highlight/reorder desks, day/night lighting morph, fly-to on selection, texture release after inactivity.
Landing Pages
3D
conference
3D Conference with Main Stage, Breakout Rooms and Highlight Clips
A virtual conference with a 3D main stage and multiple breakout rooms accessible from a lobby. The central stage has a large screen playing the main HLS stream and two side screens for highlight clips (summaries, interviews). Camera has predefined angles (stage, audience, side) with smooth GSAP transitions. Breakout rooms are intimate spaces playing recorded session videos with synchronized slides panels. On start, user sees an agenda overlay and can select sessions; choosing a session triggers a GSAP fly-to to the corresponding room and loads the video on the 3D screen. Moderators can mark timestamps in real-time to generate highlight clips which appear in a sidebar. Q&A panel syncs with video (questions anchored to timestamps). Replay button opens a modal with the selected segment. Performance: adaptive streaming, thumbnail preload, pause render on inactive tabs. Accessibility: live subtitles (if stream supports), post-event transcripts, aria on controls. Privacy: explain camera/mic before WebRTC activation. Metrics: plays per session, clips created, questions sent. CDN integration instructions and bitrate recommendations included. **Deliverables:** index.html, styles.css, conference3d.js, assets/ (HLS streams, highlight clips, GLB room models, voiceovers). **Stack:** Three.js, HLS.js, WebRTC (optional), GSAP, postprocessing. **Interactions:** Agenda session selection, fly-to room, predefined camera angles, moderator timestamps for highlight clips, Q&A anchored to video timestamps, replay modal, mark clips with keyboard shortcut (M), lobby return.
Landing Pages
3D
hybrid event
3D Hybrid Event with In-Person Integration and Synchronized Streaming
A hybrid platform that syncs the in-person experience with a 3D online replica. The real venue broadcasts HLS and the 3D replica projects the stream on virtual screens; remote attendees see clips and alternative cameras synced with what happens on-site. Shared timestamp system via WebSocket to align replays and clips between in-person and remote attendees. UI allows selecting cameras (stage, audience, backstage) and creating synced clips shared in the event gallery. Live polls and Q&A displayed both in the physical room and the 3D replica. Performance: adaptive streaming, low-latency sync, pause render offscreen. Accessibility: live subtitles, transcripts, prefers-reduced-motion. Metrics: remote attendees, clips created, successful syncs. Technical recommendations for clock sync and tolerable latency. **Deliverables:** index.html, styles.css, hybrid3d.js, assets/ (HLS streams, clips, GLB venue models). **Stack:** Three.js, HLS.js, WebSocket, GSAP. **Interactions:** Camera selector (stage/audience/backstage), create synced clips with M key, live polls, timestamped Q&A, clip gallery, sync status indicator, 2D fallback.
Landing Pages
hero section
Apple style
Apple-Style Scroll-Scrub Video Hero
A cinematic React hero section where a muted looping video fills 100vw x 100vh as a background and the user controls playback through scroll. Scrolling down advances frame by frame; scrolling up rewinds. The implementation maps scrollYProgress from 0 to 1 into video.currentTime with useMotionValue and useTransform, then smooths updates through requestAnimationFrame for polished scrubbing. At 50% scroll, a Playfair Display headline fades in with staggerChildren; the subtitle follows after 0.3s with opacity and translateY motion. At 80%, the motion.div video wrapper zooms from scale 1 to 1.15. Includes a transparent CTA with white border and white-to-black hover, a pulsing bottom scroll indicator, a 2px white top progress bar, preload metadata, and a black-to-dark-gray gradient fallback if the video cannot load.
Landing Pages
landing page
airbnb
Airbnb Clone — Travel stays and hosting
A travel marketplace landing centered on stays, host trust, and property discovery. Auto-generated landing page for Airbnb Clone.
Landing Pages
landing page
cats
Cats
Create a premium web landing page called “Cats 3D”. Design a modern, warm, minimalist and elegant 3D experience for a platform focused on cat adoption, premium care, feline accessories and a community for cat lovers. Use a deep black background with dark brown, bright orange, soft amber and warm white tones. The page should feel like entering a calm, premium and cozy 3D feline world. In the header, include the “Cats 3D” logo, navigation links for “Adoption”, “Care”, “Shop” and “Contact”, plus a highlighted “Donate” button. In the hero, place the large title “Enter the Feline World”, the subtitle “A premium 3D experience. Adopt, care for and pamper your next best friend in an environment designed for cat lovers.”, buttons “Meet the Cats” and “Care Guide”, and a 3D scene with cat toys, balls, a box, geometric structures and soft particles. Create a section called “Find Your Companion” with adoptable cat cards such as “Milo” and “Luna”, each with an image placeholder, personality tag, description and “Adopt” button. Create a premium care section with recommendations such as “Balanced Nutrition”, “Vertical Spaces” and “Daily Play”. Create an “Exclusive Accessories” section with products such as “3D Cat Tree Scratcher”, “Soft Cloud Bed” and “Smart Water Fountain”, each with a fictional price, visual rating and “Add to Cart” button. Create a community section with the title “Join the Community”, an email input and a “Subscribe” button. Include a clean footer with copyright text. Add a floating price card at the bottom-right with the text “Web page”, price “20 US$”, a “Buy” button and small accepted payment method icons. The page must include a 3D canvas, scroll animations, parallax, hover states, dark glassmorphism cards, soft shadows, functional buttons, validated form, responsive mobile menu and a premium aesthetic for cat lovers.
Landing Pages
landing page
netflix
Netflix Clone — Streaming home and plans
{ "name": "StreamVerse 3D", "suggested_route": "netflix-clone", "objective": "Create a premium, modern, cinematic, dark, immersive, functional and responsive landing page for a fictional streaming platform for movies, series, documentaries, animation, new releases, personalized lists, user profiles, recommendations, trailers, simulated playback, membership, catalog and community.", "brand_note": "Create an original fictional platform inspired by modern streaming services, without copying logos, commercial names, exact visual identities, official copy, sounds, assets, protected interfaces, official colors, real series, real movies, real thumbnails or exact designs from Netflix or any other real platform.", "main_concept": "The website should feel like entering a 3D digital cinema where the catalog comes alive. As the user scrolls, the camera moves through a dark cinematic lobby with a giant screen, floating posters, content carousels, fictional series cards, projector lights, particles, seats, video controls, user profiles and a recommendation tunnel.", "main_requirements": [ "Create a complete, modern, functional and responsive landing page.", "Include a visible 3D canvas integrated into the main experience.", "Add 3D scroll animations.", "Add parallax effects on text, posters, screens, cards, carousels, profiles, buttons, lights, seats, video controls and backgrounds.", "All buttons must work correctly.", "Optimize for desktop, tablet and mobile.", "Use smooth, cinematic, elegant and performant animations.", "Keep the scene clear, premium, dark, visual, organized and easy to navigate.", "Use fictional data for titles, genres, ratings, dates, episodes, trailers, profiles, prices and memberships." ], "visual_organization": { "max_width": "1200px or 1280px", "desktop_padding": "96px to 150px per section", "mobile_padding": "24px to 32px", "gaps": "24px, 32px or 48px", "backgrounds": [ "cinema black", "original deep red", "dark violet", "midnight blue", "glassmorphism blocks", "cinematic gradients", "subtle smoke", "light beams", "soft dividers" ], "description": "Do not overcrowd posters, carousels, text, buttons, prices, forms or 3D visuals. Separate each catalog block with enough visual space.", "cards": "Content cards must clearly show title, genre, duration, fictional rating, fictional year, status, short synopsis and CTA.", "carousels": "Carousels must have visible controls, clear navigation and good spacing.", "player": "The player must have visible controls, a progress bar and playback state." }, "structure": { "header": { "logo": "STREAMVERSE", "menu": [ "Home", "Movies", "Series", "New Releases", "Genres", "Pricing", "FAQ", "Contact" ], "buttons": [ "Start Watching", "Browse Catalog" ], "description": "Fixed header with dark translucent glassmorphism background, functional mobile hamburger menu and smooth scrolling to each section.", "microinteractions": [ "Logo with subtle projector-like glow", "Links with animated underline", "Buttons with elevation, red/violet glow and visual feedback", "Clean mobile menu transition" ] }, "hero": { "title": "A Cinematic 3D Streaming Universe for Every Story", "subtitle": "Discover original fictional movies, series, documentaries and animated worlds through an immersive streaming experience.", "search": { "input": "Search movies, series or genres", "selector": [ "Action", "Drama", "Sci-Fi", "Comedy", "Documentary", "Anime-inspired", "Family" ], "button": "Search StreamVerse" }, "buttons": [ "Enter StreamVerse", "Watch Trailer", "Choose Plan" ], "visual": "3D cinema room with giant screen, simulated trailer, floating posters, seats, projector lights, catalog cards, video controls, user profiles, particles, subtle neon and visual depth." }, "canvas_3d": { "name": "Streaming Cinema Experience", "description": "Create a 3D scene inside a canvas representing a premium digital cinema.", "elements": [ "Main 3D screen", "Floating posters of fictional titles", "Movie carousel", "Series carousel", "Simulated video player", "Cinema seats", "Projector lights", "Content cards", "User profiles", "Floating watchlist", "Genre tags", "3D play button", "Progress bar", "Episode thumbnails", "Recommendation panel", "Floating subscription CTA" ], "hotspots": [ "Featured Trailer", "Movie Shelf", "Series Shelf", "Continue Watching", "Genres", "Profiles", "Watchlist", "Start Watching" ], "main_animation": "The “Enter StreamVerse” button must trigger an animation where the camera enters the lobby, crosses posters, focuses on the main screen, plays a simulated trailer, opens a carousel, shows title details, saves to watchlist and ends in front of the “Start Watching” CTA." }, "sections": [ { "name": "Platform Overview", "title": "Streaming Designed Like a Private Cinema", "cards": [ "Original Fictional Catalog", "Immersive Trailers", "Personal Watchlists", "Profiles for Everyone" ] }, { "name": "Featured Trailer", "featured_title": "Eclipse City: Season One", "elements": [ "Cinematic poster", "Video placeholder", "Play/Pause", "Progress bar", "Volume control", "Fullscreen", "Add to Watchlist", "View Details", "Replay Trailer" ], "buttons": [ "Play Trailer", "Pause Trailer", "Add to Watchlist", "View Details", "Replay Trailer" ] }, { "name": "Movies", "movies": [ "Midnight Orbit", "The Glass Harbor", "Neon Wilds", "Silent Comet", "Velvet Heist", "Desert Signal", "The Last Projection", "Aurora District", "Paper Moon Hotel", "Quantum Rain" ], "buttons": [ "Play Preview", "Add to List", "More Info" ] }, { "name": "Series", "series": [ "Northstar Academy", "Codebreakers", "Lunar Kitchen", "City of Echoes", "Dream Circuit", "The Archive Room", "Skyline Detectives", "After the Signal" ], "buttons": [ "Open Series", "Watch Episode", "Add Series" ] }, { "name": "Content Detail", "elements": [ "Title", "Poster", "Synopsis", "Genres", "Year", "Duration", "Fictional rating", "Fictional cast", "Fictional director", "Episodes if it is a series", "Similar titles" ], "buttons": [ "Play Now", "Add to Watchlist", "Share", "Close" ] }, { "name": "Player Experience", "elements": [ "Screen", "Play/Pause", "Progress bar", "Current time", "Duration", "Volume", "Subtitles toggle", "Quality selector", "Next episode", "Skip intro", "Fullscreen", "Back to catalog" ] }, { "name": "Genres", "genres": [ "Action", "Drama", "Comedy", "Sci-Fi", "Fantasy", "Documentary", "Thriller", "Romance", "Family", "Anime-inspired", "Mystery", "Adventure" ], "button": "Explore Genre" }, { "name": "Continue Watching", "elements": [ "Title", "Progress", "Next episode", "Time remaining" ], "buttons": [ "Resume", "Remove" ] }, { "name": "Profiles", "profiles": [ "Alex", "Maya", "Kids", "Guest", "Cinephile" ], "buttons": [ "Select Profile", "Edit Profile", "Create Profile" ] }, { "name": "Recommendations", "categories": [ "Because you watched", "Trending in your world", "New fictional originals", "Continue your mood", "Short watch", "Weekend picks" ], "buttons": [ "Refresh Recommendations", "Hide Title", "Add Recommended" ] }, { "name": "New Releases", "elements": [ "Title", "Date", "Genre", "Type: movie, series, documentary, special" ], "buttons": [ "Set Reminder", "Watch Trailer" ] }, { "name": "Watchlist", "elements": [ "Saved movies", "Saved series", "Continue watching", "Downloads placeholder", "Favorite genres" ], "buttons": [ "Open Watchlist", "Sort Watchlist", "Clear Watched", "Share List" ] }, { "name": "Devices", "devices": [ "Smart TV", "Laptop", "Tablet", "Phone", "Console", "Browser" ], "button": "Preview Device" }, { "name": "Kids / Family", "elements": [ "Kids profile", "Content controls", "Watch limits placeholder", "Friendly catalog", "Parent controls" ], "buttons": [ "Preview Kids Mode", "Set Controls", "Create Kids Profile" ] }, { "name": "Pricing", "plans": [ "Starter", "Standard Cinema", "Premium 4K", "Family Screen", "Ultimate Studio" ], "recommended_plan": "Premium 4K", "buttons": [ "Choose Plan", "Start Trial" ] }, { "name": "Testimonials", "testimonials": [ "StreamVerse feels like browsing a private cinema from home.", "The 3D catalog makes discovering stories feel exciting again.", "Profiles, watchlists and trailers made the experience easy for everyone." ] }, { "name": "FAQ", "questions": [ "Is this an official Netflix website?", "Are the movies and series fictional?", "Can I play trailers?", "Can I create profiles?", "Can I save titles to a watchlist?", "Can I choose a streaming plan?", "Is the experience responsive on mobile?" ], "note": "Clearly state that this is an original fictional platform with no affiliation with Netflix or any other real brand." }, { "name": "Signup / Contact", "fields": [ "Name", "Email", "Preferred Plan", "Favorite Genre", "Number of Profiles", "Device Preference", "Message optional", "Consent Checkbox" ], "checkbox": "I understand this is a fictional streaming platform concept.", "button": "Create StreamVerse Account" } ], "footer": { "text": "Original fictional streaming platform concept. Not affiliated with Netflix or any real streaming brand.", "links": [ "Movies", "Series", "Genres", "Profiles", "Watchlist", "Devices", "Pricing", "Contact", "Terms", "Privacy", "Content Policy", "Social links" ] } }, "required_interactions": [ "The menu must navigate smoothly to each section.", "Enter StreamVerse must activate a guided animation in the 3D canvas.", "Watch Trailer must go to Featured Trailer and activate the player.", "Choose Plan must go to Pricing.", "Search StreamVerse must filter or show simulated results.", "Canvas hotspots must show information.", "Play Trailer must activate simulated playback.", "Pause Trailer must visually pause.", "Add to Watchlist must change state.", "View Details must open a panel.", "Replay Trailer must restart the trailer.", "Play Preview must open the player.", "Add to List must change state.", "More Info must open details.", "Open Series must open details.", "Watch Episode must open the player.", "Add Series must change state.", "Play Now must open the player.", "Share must show confirmation.", "Close must close the modal.", "Subtitles must activate simulated subtitles.", "Quality must toggle options.", "Next Episode must change thumbnail.", "Skip Intro must advance progress.", "Fullscreen must activate a simulated expanded view.", "Back to Catalog must return to the catalog.", "Explore Genre must filter the catalog or focus a canvas section.", "Resume must open the player at progress.", "Remove must remove the card.", "Select Profile must change the active profile.", "Edit Profile must open a form.", "Create Profile must add a simulated profile.", "Refresh Recommendations must reorganize results.", "Hide Title must hide a card.", "Add Recommended must save a title.", "Set Reminder must activate a simulated reminder.", "Open Watchlist must open a panel.", "Sort Watchlist must reorganize.", "Clear Watched must clear watched items.", "Share List must show confirmation.", "Preview Device must change the screen mockup.", "Preview Kids Mode must change the visual.", "Set Controls must open a panel.", "Create Kids Profile must create a profile.", "Choose Plan must select a plan and show a summary.", "Start Trial must go to Signup.", "FAQ must expand and collapse correctly.", "Create StreamVerse Account must validate fields, checkbox and show confirmation.", "The form must validate fields and show confirmation.", "The mobile menu must open and close correctly.", "All buttons must have hover, active state and visual feedback." ], "animations": [ "The camera should move from the cinema lobby toward the main screen, trailer, movies, series, genres, profiles, recommendations, devices, pricing and signup.", "Posters should emerge from depth using translateZ, scale and fade.", "Catalog rows should move horizontally with smooth parallax.", "The main screen should illuminate the environment like a cinematic projection.", "Simulated trailers should activate progress bars and lighting changes.", "Content cards should rotate slightly with 3D hover.", "Profiles should appear as floating avatars.", "Recommendations should reorganize with a smooth transition.", "The watchlist should stack cards like a 3D tray.", "Device mockups should synchronize screens with animation.", "Pricing cards should lift with 3D hover.", "The form should appear from depth with a clean transition." ], "visual_style": { "description": "Cinematic, dark, premium, modern, immersive, elegant, entertaining and visual.", "palette": [ "Cinema black", "Midnight blue", "Original deep red", "Dark violet", "Screen white", "Graphite gray", "Subtle cyan", "Soft gold for highlights", "Success green", "Soft red for errors" ], "assets": [ "Dark glassmorphism", "Clean cards", "Floating posters", "3D screens", "Player", "Carousels", "Profiles", "Projector lights", "Soft shadows", "Rounded borders" ], "typography": "Modern, bold, readable and entertainment-oriented typography." }, "expected_result": "A complete, immersive and functional landing page for “Netflix Clone 3D”, with an original “StreamVerse”-style identity, 3D canvas, digital cinema room, floating posters, fictional movie and series catalog, featured trailer, complete player, content details, genres, continue watching, profiles, recommendations, new releases, watchlist, devices, family mode, pricing, testimonials, FAQ, signup, functional form with fictional concept checkbox, 3D scroll animations, parallax, hotspots, functional buttons, responsive design, generous margins, clear component separation and a premium original streaming platform aesthetic." }
Landing Pages
landing page
promptstudio
Promptstudio Experience
{ "name": "PromptStudio Experience", "suggested_route": "promptstudio-experience", "objective": "Create a premium, modern, immersive, technological, creative, functional and responsive landing page for a prompt studio/lab platform where users, creators, teams and companies can design, test, organize, improve, save, version and share AI prompts.", "main_concept": "The website should feel like entering a creative 3D artificial intelligence studio where prompts float as glowing cards, the user works inside a central editor, results appear in holographic panels, versions are organized as layers, workflows connect through nodes, templates appear as visual capsules and collections are saved inside a futuristic library.", "main_requirements": [ "Create a complete, modern, functional and responsive landing page.", "Include a visible 3D canvas integrated into the main experience.", "Add 3D scroll animations.", "Add parallax effects on text, editor, prompt cards, nodes, results, panels, library, workflows, buttons, particles, connection lines and backgrounds.", "All buttons must work correctly.", "Optimize for desktop, tablet and mobile.", "Use smooth, intelligent, futuristic and performant animations.", "Keep the scene clear, premium, technological, organized, creative and easy to navigate.", "Use fictional data for prompts, models, results, users, templates, workflows, prices and metrics.", "Do not use protected logos, commercial names, exact real interfaces or misleading claims of guaranteed results." ], "visual_organization": { "max_width": "1200px or 1280px", "desktop_padding": "96px to 150px per section", "mobile_padding": "24px to 32px", "gaps": "24px, 32px or 48px", "backgrounds": [ "midnight blue", "deep black", "cool white", "glassmorphism blocks", "soft gradients", "AI grids", "connection lines", "subtle dividers" ], "description": "Do not overcrowd prompts, results, buttons, forms, pricing, nodes or 3D visuals. Separate each studio block with enough visual space.", "editor": "The editor must have readable typography, a clear prompt area, visible controls and strong contrast.", "prompt_cards": "Prompt cards must clearly show title, category, goal, variables, tone, status, fictional rating and CTA.", "result_panels": "Result panels must show simulated output, score, comparison and visual feedback." }, "structure": { "header": { "logo": "PROMPTSTUDIO", "menu": [ "Home", "Studio", "Library", "Testing", "Workflows", "Marketplace", "Pricing", "Contact" ], "buttons": [ "Start Creating", "Explore Library" ], "description": "Fixed header with dark or light translucent glassmorphism background, functional mobile hamburger menu and smooth scrolling to each section.", "microinteractions": [ "Logo with glowing cursor and small AI particles", "Links with animated underline", "Buttons with elevation, cyan/violet glow and visual feedback", "Clean mobile menu transition" ] }, "hero": { "title": "Build, Test and Organize Better Prompts in a 3D AI Studio", "subtitle": "Create prompt systems, compare outputs, save reusable templates, version your ideas and build AI workflows from one immersive workspace.", "primary_action": { "input": "What prompt do you want to create?", "selector": [ "Writing", "Coding", "Marketing", "Design", "Education", "Research", "Support", "Sales" ], "button": "Generate Prompt Draft" }, "buttons": [ "Enter PromptStudio", "Browse Templates", "Start Free" ], "visual": "3D lab with central editor, floating prompt cards, workflow nodes, result panels, template library, connection lines, variable chips, glowing cursor, soft particles and visual depth." }, "canvas_3d": { "name": "Prompt Studio Experience", "description": "Create a 3D scene inside a canvas representing a premium creative prompt laboratory.", "elements": [ "Central 3D prompt editor", "Floating prompt cards", "Variables as chips: {audience}, {tone}, {goal}, {format}, {constraints}", "Simulated output panel", "A/B comparison panel", "Template library", "Connected workflow nodes", "Version timeline", "Collection folders", "Fictional quality score indicators", "3D play/test button", "Run history", "Collaboration avatars", "Marketplace cards", "Floating signup CTA" ], "hotspots": [ "Prompt Editor", "Template Library", "A/B Testing", "Output Panel", "Workflow Nodes", "Version History", "Marketplace", "Start Creating" ], "main_animation": "The “Enter PromptStudio” button must trigger an animation where the camera enters the lab, focuses on the editor, writes a prompt, activates a test, compares results, saves a version, connects a workflow and ends in front of the “Start Creating” CTA." }, "sections": [ { "name": "Platform Overview", "title": "A Complete Studio for Prompt Creation", "description": "Explain that PromptStudio helps turn scattered ideas into reusable, testable, organized prompts ready for real workflows.", "cards": [ "Prompt Builder", "Reusable Templates", "Output Testing", "Workflow Systems" ] }, { "name": "Prompt Editor", "elements": [ "Prompt field", "Goal selector", "Tone selector", "Format selector", "Constraints field", "Reusable variables", "Final prompt preview", "Fictional quality score" ], "buttons": [ "Write Sample Prompt", "Improve Prompt", "Test Prompt", "Save Prompt" ] }, { "name": "Prompt Library", "prompts": [ "Landing Page Generator", "UX Audit Assistant", "Java Code Explainer", "Marketing Email Builder", "Product Description Writer", "Research Summary Prompt", "Interview Question Coach", "Brand Voice Refiner", "Story Scene Builder", "Sales Objection Handler" ], "buttons": [ "Open Prompt", "Duplicate", "Favorite", "Run Test" ] }, { "name": "Templates", "templates": [ "Content Creator Pack", "Developer Debug Pack", "SaaS Landing Page Pack", "SEO Article Pack", "Customer Support Pack", "Teacher Lesson Pack", "Research Assistant Pack", "Image Prompt Pack", "Product Manager Pack", "Sales Outreach Pack" ], "buttons": [ "Preview Template", "Use Template" ] }, { "name": "A/B Testing", "elements": [ "Prompt A", "Prompt B", "Output A", "Output B", "Clarity score", "Usefulness score", "Format score", "Simulated recommendation" ], "buttons": [ "Run A/B Test", "Choose Winner", "Merge Best Parts", "Save Experiment" ] }, { "name": "Output Lab", "message": "Outputs are simulated placeholders. Review results before using them.", "elements": [ "Simulated output", "Format", "Length", "Consistency", "Hallucination risk placeholder", "Quality checklist", "Feedback notes" ], "buttons": [ "Regenerate Output", "Rate Output", "Add Feedback", "Export Result" ] }, { "name": "Workflow Builder", "nodes": [ "Input", "Prompt", "Context", "Model placeholder", "Review", "Rewrite", "Export", "Publish" ], "buttons": [ "Add Node", "Connect Nodes", "Run Workflow", "Save Workflow" ] }, { "name": "Version History", "versions": [ "v1 Rough Idea", "v2 Structured Prompt", "v3 Added Constraints", "v4 Improved Examples", "v5 Team Approved" ], "buttons": [ "Preview Version", "Restore Version", "Compare Versions" ] }, { "name": "Collections", "collections": [ "Marketing Prompts", "Coding Prompts", "Design Prompts", "Education Prompts", "Research Prompts", "Sales Prompts", "Personal Productivity", "Image Generation Prompts" ], "buttons": [ "Create Collection", "Move Prompt", "Sort Collection", "Share Collection" ] }, { "name": "Marketplace", "categories": [ "Business", "Coding", "Design", "Writing", "Education", "Marketing", "Research", "Productivity" ], "products": [ "Prompt packs", "Workflow kits", "Brand voice systems", "Landing page generators", "Coding assistants", "Lesson builders" ], "buttons": [ "View Pack", "Add to Cart", "Open Cart" ], "note": "Keep checkout simulated and without real payments." }, { "name": "Team Collaboration", "features": [ "Team prompt library", "Comments", "Approval flow", "Roles", "Shared collections", "Prompt reviews", "Usage notes", "Workspace permissions" ], "button": "View Collaboration Feature" }, { "name": "Analytics", "metrics": [ "Prompts created", "Tests run", "Average quality score", "Saved templates", "Team approvals", "Workflow runs", "Most used categories", "Exported results" ], "buttons": [ "Open Analytics", "Compare Categories", "Download Report" ] }, { "name": "Use Cases", "cases": [ "Creators", "Developers", "Marketing Teams", "Educators", "Researchers", "Product Managers", "Customer Support", "Agencies" ], "button": "Explore Use Case" }, { "name": "Security / Governance", "message": "Always review AI outputs before publishing or using them in critical contexts.", "elements": [ "Workspace permissions", "Prompt review", "Version control", "Private collections", "Export controls", "Usage notes", "Team approval", "Safe output review reminder" ], "button": "View Governance Details" }, { "name": "Pricing", "plans": [ "Free Creator", "Studio Plus", "Workflow Pro", "Team Lab", "Enterprise Studio" ], "recommended_plan": "Workflow Pro", "buttons": [ "Choose Plan", "Start Free" ] }, { "name": "Testimonials", "testimonials": [ "PromptStudio turned our scattered prompt ideas into a reusable team library.", "The A/B testing helped us understand which instructions produced clearer outputs.", "Workflows made prompt creation feel visual, structured and collaborative." ] }, { "name": "FAQ", "questions": [ "Can I create reusable prompts?", "Can I test different prompt versions?", "Can I organize prompts into collections?", "Can teams collaborate?", "Can I build workflows?", "Can I export results?", "Are outputs guaranteed?", "Is the platform responsive on mobile?" ], "note": "Clearly explain that outputs must be reviewed before use." }, { "name": "Signup / Contact", "fields": [ "Name", "Email", "Role", "Main Use Case", "Prompt Category Interest", "Team Size", "Plan Interest", "Message", "Consent Checkbox" ], "checkbox": "I understand AI outputs should be reviewed before use.", "button": "Create PromptStudio Workspace" } ], "footer": { "links": [ "Studio", "Editor", "Library", "Templates", "Testing", "Workflows", "Marketplace", "Analytics", "Pricing", "Contact", "Terms", "Privacy", "Responsible AI Note", "Social links" ] } }, "required_interactions": [ "The menu must navigate smoothly to each section.", "Enter PromptStudio must activate a guided animation in the 3D canvas.", "Browse Templates must go to Library or Templates.", "Start Free must go to Pricing or Signup.", "Generate Prompt Draft must create a simulated prompt based on the selected category.", "Canvas hotspots must show information.", "Write Sample Prompt must type simulated text with a cursor.", "Improve Prompt must improve the visual structure.", "Test Prompt must generate simulated output.", "Save Prompt must change state to saved.", "Open Prompt must open the editor.", "Duplicate must create a simulated copy.", "Favorite must change state.", "Run Test must generate simulated output.", "Preview Template must open a preview.", "Use Template must create a simulated collection.", "Run A/B Test must animate results.", "Choose Winner must highlight the winning version.", "Merge Best Parts must create a combined version.", "Save Experiment must change state.", "Regenerate Output must change the result.", "Rate Output must show a rating.", "Add Feedback must add a note.", "Export Result must show confirmation.", "Add Node must add a visual node.", "Connect Nodes must draw a line.", "Run Workflow must animate the flow.", "Save Workflow must change state.", "Preview Version must open details.", "Restore Version must change the active version.", "Compare Versions must show a comparison.", "Create Collection must create a simulated collection.", "Move Prompt must move a card.", "Sort Collection must reorganize.", "Share Collection must show confirmation.", "View Pack must open details.", "Add to Cart must update the mini cart.", "Open Cart must show a summary.", "View Collaboration Feature must open details.", "Open Analytics must open a panel.", "Compare Categories must show comparison.", "Download Report must show confirmation.", "Explore Use Case must open a panel or filter templates.", "View Governance Details must open a panel.", "Choose Plan must select a plan and show a summary.", "Create PromptStudio Workspace must validate fields, checkbox and show confirmation.", "FAQ must expand and collapse correctly.", "The mobile menu must open and close correctly.", "All buttons must have hover, active state and visual feedback." ], "animations": [ "The camera should move from the lab toward editor, variables, testing, outputs, workflows, versioning, collections, marketplace, analytics, pricing and signup.", "The cursor should smoothly type a prompt inside the editor.", "Variables should appear as floating chips using translateZ, scale and fade.", "Prompt cards should reorganize into a library with a smooth transition.", "Outputs should generate as holographic panels.", "A/B testing should split the screen into two comparison panels.", "Workflow nodes should connect with progressive glowing lines.", "The version timeline should unfold layered depth.", "Collections should open like 3D folders.", "Marketplace packs should float as premium cards.", "Metrics should animate with counters and charts.", "Pricing cards should lift with 3D hover.", "The form should appear from depth with a clean transition." ], "visual_style": { "description": "Futuristic, premium SaaS, creative, technological, clear, elegant and productive.", "palette": [ "Midnight blue", "Deep black", "Cool white", "Electric cyan", "Soft violet", "Success green", "Graphite gray", "Subtle silver", "Soft orange for alerts" ], "assets": [ "Glassmorphism", "Clean cards", "3D editor", "Variable chips", "Connected nodes", "Holographic outputs", "Floating libraries", "Soft shadows", "Rounded borders" ], "typography": "Modern, readable, technical and product-oriented typography." }, "expected_result": "A complete, immersive and functional landing page for “PromptStudio Experience”, with a 3D canvas, creative prompt lab, interactive editor, library, templates, A/B testing, outputs, workflows, versioning, collections, simulated marketplace, collaboration, analytics, use cases, governance, pricing, testimonials, FAQ, signup, functional form with responsible review checkbox, 3D scroll animations, parallax, hotspots, functional buttons, responsive design, generous margins, clear component separation and a premium AI platform aesthetic." }
Landing Pages
landing page
refactory
Refactory Online
{ "name": "Refactory Online", "suggested_route": "refactory-online", "objective": "Create a premium, modern, technological, immersive, professional, functional and responsive landing page for an online code refactoring platform focused on static analysis, architecture improvement, intelligent review, technical debt detection, performance optimization, code cleanup, developer collaboration, CI/CD automation, technical reports, quality metrics and engineering workflows.", "main_concept": "The website should feel like entering a 3D software engineering laboratory where code visually transforms. As the user scrolls, the camera moves through a digital environment with floating code lines, a central editor, analysis panels, file trees, architecture modules, technical debt cards, abstract bugs, connected nodes, quality charts, CI/CD pipelines and before/after comparators.", "main_requirements": [ "Create a complete, modern, functional and responsive landing page.", "Include a visible 3D canvas integrated into the main experience.", "Add 3D scroll animations.", "Add parallax effects on text, editor, code, terminal, dashboards, nodes, diagrams, cards, buttons, pipelines, pull requests, abstract bugs and backgrounds.", "All buttons must work correctly.", "Optimize for desktop, tablet and mobile.", "Use smooth, technical, futuristic and performant animations.", "Keep the scene clear, premium, technological, organized and easy to navigate.", "Use fictional data for repositories, metrics, errors, pull requests, commits, issues, pipelines, plans and reports.", "Do not promise perfect fixes or replace human review.", "Include the message: “Review all code suggestions before merging”." ], "visual_organization": { "max_width": "1200px or 1280px", "desktop_padding": "96px to 150px per section", "mobile_padding": "24px to 32px", "gaps": "24px, 32px or 48px", "backgrounds": [ "deep black", "midnight blue", "cool white", "glassmorphism blocks", "technical grids", "connection lines", "terminal panels", "subtle dividers" ], "editor": "The editor must use readable monospaced typography, syntax highlighting, active line, line numbers and strong contrast.", "cards": "Analysis cards must clearly show metric, impact, severity, file, recommendation and CTA.", "dashboards": "Dashboards must be readable, with simple charts, counters, progress bars and visual states." }, "structure": { "header": { "logo": "REFACTORY", "menu": [ "Home", "Analyze", "Refactor", "Compare", "Reports", "Integrations", "Pricing", "Contact" ], "buttons": [ "Analyze Code", "Book Demo" ], "description": "Fixed header with dark translucent glassmorphism background, functional mobile hamburger menu and smooth scrolling to each section.", "microinteractions": [ "Logo with blinking terminal cursor", "Links with animated underline", "Buttons with elevation, cyan/green glow and visual feedback", "Clean mobile menu transition" ] }, "hero": { "title": "Refactor Code Online in a 3D Engineering Workspace", "subtitle": "Analyze technical debt, detect complexity, compare refactors, improve architecture and ship cleaner code with a visual developer workflow.", "primary_action": { "input": "Paste a repository URL or file name", "selector": [ "JavaScript", "TypeScript", "Python", "Java", "Kotlin", "Go", "PHP", "C#" ], "button": "Run Code Analysis" }, "buttons": [ "Enter Refactory Lab", "View Refactor Demo", "Start Free" ], "visible_text": "Suggestions are simulated. Review changes before merging.", "visual": "3D code laboratory with central editor, floating code lines, terminal, architecture nodes, metric panels, pull requests, abstract bugs, CI/CD pipeline, digital particles and visual depth." }, "canvas_3d": { "name": "Refactory Lab Experience", "description": "Create a 3D scene inside a canvas representing a digital refactoring laboratory.", "elements": [ "Central 3D editor", "Floating code with syntax highlighting", "File tree", "Terminal", "Analysis panel", "Technical debt blocks", "Abstract bugs", "Connected architecture nodes", "Before/after comparator", "Floating pull request", "CI/CD pipeline", "Quality charts", "Complexity cards", "Test results", "Report card", "Floating CTA to start" ], "hotspots": [ "Code Editor", "Technical Debt", "Refactor Suggestion", "Architecture Map", "Before / After", "Test Results", "CI Pipeline", "Analyze Code" ], "main_animation": "The “Enter Refactory Lab” button must trigger a visible animation where the camera enters the lab, focuses on the editor, analyzes code, marks problems, connects architecture nodes, shows refactor before/after, runs tests, generates a report and ends in front of the “Analyze Code” CTA." }, "sections": [ { "name": "Platform Overview", "title": "Clean Code Workflows for Modern Engineering Teams", "description": "Explain that Refactory Online helps detect technical debt, reduce complexity, improve readability, compare changes and turn suggestions into reviewable team workflows.", "cards": [ "Code Analysis", "Smart Refactors", "Architecture Visibility", "Review-Ready Reports" ], "note": "Always review generated suggestions with your engineering team." }, { "name": "Code Analyzer", "elements": [ "Language selector", "File tree", "Editor preview", "Complexity score", "Duplication score", "Fictional maintainability index", "Test coverage placeholder", "Security note placeholder" ], "buttons": [ "Run Analysis", "Scan File", "View Issues", "Reset Scan" ] }, { "name": "Technical Debt", "issues": [ "High cyclomatic complexity", "Duplicate utility function", "Long method", "Unclear naming", "Nested conditionals", "Missing test coverage", "Tight coupling", "Large component", "Unused dependency", "Slow query placeholder" ], "buttons": [ "Inspect Issue", "Create Refactor Task", "Ignore" ] }, { "name": "Refactor Demo", "elements": [ "Code before", "Code after", "Change explanation", "Benefits", "Risks", "Review checklist" ], "buttons": [ "Generate Refactor", "Compare Diff", "Apply Suggestion", "Rollback" ], "message": "Applied suggestions are simulated and should be reviewed before merge." }, { "name": "Before / After Diff", "elements": [ "Split view", "Removed lines", "Added lines", "Comments", "Before/after metrics", "Change summary" ], "buttons": [ "Highlight Changes", "Approve Diff", "Request Review", "Export Patch" ] }, { "name": "Architecture Map", "elements": [ "Modules", "Services", "Components", "Dependencies", "Coupling", "Data flow", "Architecture alerts" ], "buttons": [ "Generate Architecture Map", "Show Dependencies", "Find Coupling", "Simplify View" ] }, { "name": "Testing", "elements": [ "Unit tests", "Integration tests", "Coverage placeholder", "Failed tests", "Passing tests", "Test recommendations", "Test generation placeholder" ], "buttons": [ "Run Tests", "View Coverage", "Suggest Tests", "Export Test Plan" ] }, { "name": "Pull Request Review", "elements": [ "PR title", "Summary", "Changed files", "Review comments", "Risk level", "Checklist", "Fictional approvers" ], "buttons": [ "Create PR Summary", "Add Review Comment", "Approve Review", "Request Changes" ] }, { "name": "Reports", "reports": [ "Code Quality Report", "Technical Debt Report", "Refactor Impact Report", "Architecture Report", "Test Coverage Report", "Sprint Cleanup Report", "Executive Summary", "Developer Action Plan" ], "buttons": [ "Preview Report", "Generate Report", "Download Report" ] }, { "name": "CI/CD Integrations", "integrations": [ "Git provider", "CI pipeline", "Issue tracker", "Chat ops", "Cloud deployment", "Code coverage", "Static analysis", "Webhooks", "API", "CLI" ], "buttons": [ "Explore Integrations", "Connect Demo Integration", "Request Integration" ] }, { "name": "Developer Workflow", "steps": [ "Import repository", "Run analysis", "Review issues", "Generate refactor suggestions", "Compare diff", "Run tests", "Create PR summary", "Merge after review" ], "button": "View Step" }, { "name": "Collaboration", "features": [ "Team comments", "Review assignments", "Refactor tasks", "Shared reports", "Code ownership", "Architecture notes", "Sprint cleanup board", "Decision log" ], "button": "View Collaboration Feature" }, { "name": "Security / Governance", "elements": [ "Private repositories placeholder", "Permission controls", "Review before merge", "Audit log", "Export controls", "Team approvals", "Safe suggestions", "No automatic merge by default" ], "button": "View Governance Details", "message": "Refactor suggestions should be reviewed by developers before production use." }, { "name": "Use Cases", "cases": [ "SaaS teams", "Freelance developers", "Legacy modernization", "Startup engineering", "Enterprise code quality", "Technical debt cleanup", "Code review acceleration", "Education and mentoring" ], "button": "Explore Use Case" }, { "name": "Pricing", "plans": [ "Free Scan", "Developer Pro", "Team Refactor", "Engineering Org", "Enterprise Quality" ], "recommended_plan": "Team Refactor", "buttons": [ "Choose Plan", "Start Trial" ] }, { "name": "Testimonials", "testimonials": [ "Refactory made technical debt visible before it slowed our roadmap.", "The before/after diff helped our team review refactors faster.", "Architecture maps gave us a clearer way to discuss code quality." ] }, { "name": "FAQ", "questions": [ "Can I analyze code online?", "Can I compare before and after refactors?", "Does it automatically merge code?", "Can teams review suggestions?", "Can I generate reports?", "Can I connect CI/CD?", "Are refactor suggestions guaranteed?", "Is the platform responsive on mobile?" ], "note": "Clearly explain that suggestions must be reviewed before use." }, { "name": "Signup / Contact", "fields": [ "Name", "Email", "Role", "Company", "Primary Language", "Team Size", "Main Challenge", "Plan Interest", "Message", "Consent Checkbox" ], "checkbox": "I understand code suggestions should be reviewed before production use.", "button": "Create Refactory Workspace" } ], "footer": { "links": [ "Analyze", "Refactor", "Compare", "Architecture", "Testing", "Reports", "Integrations", "Pricing", "Contact", "Terms", "Privacy", "Responsible Code Review Note", "Social links" ] } }, "required_interactions": [ "The menu must navigate smoothly to each section.", "Enter Refactory Lab must activate a guided animation in the 3D canvas.", "View Refactor Demo must go to Refactor Demo.", "Start Free must go to Pricing or Signup.", "Run Code Analysis must run a simulated analysis.", "Canvas hotspots must show information.", "Run Analysis must animate scanning.", "Scan File must analyze the selected file.", "View Issues must open the issue list.", "Reset Scan must restore values.", "Inspect Issue must open details.", "Create Refactor Task must create a simulated task.", "Ignore must change state.", "Generate Refactor must show a simulated improved version.", "Compare Diff must open diff view.", "Apply Suggestion must change state to applied.", "Rollback must return to previous code.", "Highlight Changes must highlight differences.", "Approve Diff must change state.", "Request Review must open a review panel.", "Export Patch must show confirmation.", "Generate Architecture Map must create a visual graph.", "Show Dependencies must draw connections.", "Find Coupling must highlight problematic nodes.", "Simplify View must clean the map.", "Run Tests must animate execution.", "View Coverage must open a panel.", "Suggest Tests must show suggestions.", "Export Test Plan must show confirmation.", "Create PR Summary must generate a summary.", "Add Review Comment must add a comment.", "Approve Review must change state.", "Request Changes must mark requested changes.", "Preview Report must open a preview.", "Generate Report must create a simulated report.", "Download Report must show confirmation.", "Explore Integrations must open a map.", "Connect Demo Integration must activate a simulated connection.", "Request Integration must open a short form.", "View Step must open details.", "View Collaboration Feature must open details.", "View Governance Details must open a panel.", "Explore Use Case must open a panel or filter workflows.", "Choose Plan must select a plan and show a summary.", "Start Trial must go to Signup or Contact.", "FAQ must expand and collapse correctly.", "Create Refactory Workspace must validate fields, checkbox and show confirmation.", "The form must validate fields and show confirmation.", "The mobile menu must open and close correctly.", "Scrolling must activate 3D animations and parallax.", "All buttons must have hover, active state and visual feedback." ], "animations": [ "The camera should move from the lab toward editor, analysis, technical debt, refactor, diff, architecture, testing, pull request, reports, integrations, pricing and signup.", "Code lines should float from depth using translateZ, scale and fade.", "The editor should subtly illuminate problematic lines.", "Abstract bugs should transform into checkmarks after applying refactors.", "Architecture nodes should connect with glowing lines.", "The before/after diff should split the scene into two synchronized panels.", "The terminal should run simulated commands with an animated cursor.", "The CI/CD pipeline should illuminate steps sequentially.", "Quality charts should grow progressively.", "Reports should generate as floating documents.", "Integrations should connect with animated lines.", "Pricing cards should lift with 3D hover.", "The form should appear from depth with a clean transition." ], "visual_style": { "description": "Developer SaaS, technological, premium, dark, clear, professional, visual and futuristic.", "palette": [ "Deep black", "Midnight blue", "Cool white", "Electric cyan", "Success green", "Technical purple", "Graphite gray", "Soft orange for warnings", "Soft red for errors", "Subtle silver" ], "assets": [ "Dark glassmorphism", "Clean cards", "3D editor", "Floating code", "Terminal", "Connected nodes", "Dashboards", "Diffs", "Reports", "Soft shadows", "Rounded borders" ], "typography": "Modern typography for UI and monospaced typography for code." }, "expected_result": "A complete, immersive and functional landing page for “Refactory Online”, with a 3D canvas, refactoring lab, code editor, online analysis, technical debt, refactor suggestions, before/after comparator, architecture map, testing, pull request review, reports, CI/CD integrations, developer workflow, collaboration, governance, use cases, pricing, testimonials, FAQ, signup, functional form with responsible review checkbox, 3D scroll animations, parallax, hotspots, functional buttons, responsive design, generous margins, clear component separation and a premium developer SaaS platform aesthetic." }
Landing Pages
landing page
soundcloud
SoundCloud Clone — Audio creator hub
{ "name": "WaveCloud 3D", "suggested_route": "soundcloud-clone", "objective": "Create a premium, modern, musical, social, immersive, functional and responsive landing page for a fictional and original audio streaming platform called WaveCloud.", "brand_note": "Create an original fictional platform inspired by modern music and social audio apps, without copying logos, commercial names, exact visual identities, official copy, proprietary assets, protected interfaces, official colors, real audio, real songs, real covers or exact designs from SoundCloud or any other real brand.", "main_concept": "The website should feel like entering a 3D music studio where audio waves become visual landscapes. As the user scrolls, the camera moves through a digital stage with a central player, glowing waveforms, speakers, vinyl records, futuristic cassettes, track cards, playlists, floating covers, artist avatars, timestamp comments, visualizers, uploads and creator dashboards.", "main_requirements": [ "Create a complete, modern, functional and responsive landing page.", "Include a visible 3D canvas integrated into the main experience.", "Add 3D scroll animations.", "Add parallax effects on text, waveforms, player, speakers, vinyl records, tracks, covers, playlists, avatars, comments, buttons, visualizers and backgrounds.", "All buttons must work correctly.", "Optimize for desktop, tablet and mobile.", "Use smooth, rhythmic, musical and performant animations.", "Keep the scene clear, premium, creative, energetic, organized and easy to navigate.", "Use fictional data for tracks, artists, plays, likes, playlists, comments, analytics, prices and plans.", "Do not use protected audio or promise guaranteed monetization.", "Include messages such as “demo audio only”, “fictional creator data” and “results depend on audience growth and platform rules”." ], "visual_organization": { "max_width": "1200px or 1280px", "desktop_padding": "96px to 150px per section", "mobile_padding": "24px to 32px", "gaps": "24px, 32px or 48px", "description": "Do not overcrowd tracks, waveforms, playlists, covers, buttons, forms, pricing or 3D visuals. Separate each music block with enough visual space.", "backgrounds": [ "studio black", "original orange", "night violet", "deep blue", "cool white", "glassmorphism blocks", "audio gradients", "waveform lines", "subtle dividers" ] }, "structure": { "header": { "logo": "WAVECLOUD", "menu": [ "Home", "Discover", "Tracks", "Artists", "Playlists", "Upload", "Creator Tools", "Pricing", "Contact" ], "buttons": [ "Start Listening", "Upload Track" ], "description": "Fixed header with dark translucent glassmorphism background, functional mobile hamburger menu and smooth scrolling to each section.", "microinteractions": [ "Animated waveform logo", "Rhythmic underline links", "Buttons with elevation, orange/violet/cyan glow and visual feedback", "Clean mobile menu transition" ] }, "hero": { "title": "Discover Independent Audio in a 3D Sound Universe", "subtitle": "Stream fictional tracks, explore creators, comment on waveforms, build playlists and upload demo audio inside an immersive music platform concept.", "search": { "input": "Search tracks, artists or moods", "selector": [ "Electronic", "Hip-Hop", "Indie", "Ambient", "Podcast", "Beats", "Lo-Fi", "Experimental" ], "button": "Search WaveCloud" }, "buttons": [ "Enter Sound Universe", "Play Featured Track", "Upload Demo Track" ], "visible_text": "Fictional tracks and demo audio experience only.", "visual": "3D music studio with central player, giant waveform, speakers, vinyl records, floating covers, track cards, artists, audio visualizer, comments, stage lights, rhythmic particles and visual depth." }, "canvas_3d": { "name": "Sound Universe Experience", "description": "Create a 3D scene inside a canvas representing a premium digital music studio.", "elements": [ "Central 3D player", "Glowing waveform", "3D speakers", "Vinyl records and abstract discs", "Futuristic cassettes", "Track cards", "Fictional covers", "Floating playlists", "Artist avatars", "Timestamp comments", "Audio visualizer", "3D play button", "Upload panel", "Creator analytics dashboard", "Floating signup CTA" ], "hotspots": [ "Featured Player", "Waveform Comments", "Track Cards", "Artist Profile", "Playlist Shelf", "Upload Studio", "Creator Analytics", "Start Listening" ], "main_animation": "The “Enter Sound Universe” button must trigger an animation where the camera enters the studio, orbits the player, activates a waveform, plays a simulated track, opens comments, saves to a playlist, shows an artist profile, opens upload and ends in front of the “Start Listening” CTA." }, "sections": [ { "name": "Platform Overview", "title": "Stream, Share and Grow Your Sound", "cards": [ "Social Audio Player", "Waveform Comments", "Creator Profiles", "Upload & Analytics" ] }, { "name": "Featured Player", "track": "Neon Skyline Drift", "artist": "Luma Echo", "elements": [ "Cover", "Waveform", "Play/Pause", "Progress bar", "Current time", "Duration", "Volume", "Like", "Repost placeholder", "Add to playlist", "Share", "Timestamp comments" ], "buttons": [ "Play Track", "Pause Track", "Like Track", "Add to Playlist", "Share Track" ] }, { "name": "Tracks", "tracks": [ "Midnight Pulse", "Cloud Runner", "Golden Static", "City Loop", "Analog Dreams", "Velvet Bass", "Rain Tape", "Orbit Delay", "Sunset Frequencies", "Deep Room Signal" ], "buttons": [ "Play Preview", "Like", "Add to Queue", "More Info" ] }, { "name": "Track Detail", "elements": [ "Title", "Artist", "Cover", "Full waveform", "Description", "Genre", "Tags", "Fictional date", "License placeholder", "Timestamp comments", "Similar tracks" ], "buttons": [ "Play Now", "Follow Artist", "Add Comment", "Close" ] }, { "name": "Waveform Comments", "elements": [ "Large waveform", "Timestamp markers", "Floating comments", "Fictional user", "Reactions" ], "buttons": [ "Add Timestamp Comment", "React", "Jump to Moment", "Hide Comments" ] }, { "name": "Artists", "artists": [ "Luma Echo", "Kai Voltage", "Nora Static", "Milo Wave", "Ava Frequencies", "Echo District", "Velvet Circuit", "Skyline Tapes" ], "buttons": [ "Open Artist", "Follow", "Play Top Track" ] }, { "name": "Artist Profile", "elements": [ "Visual header", "Avatar", "Bio", "Tracks", "Albums placeholder", "Playlists", "Fictional stats", "Social links placeholder" ], "buttons": [ "Follow Artist", "Message Artist", "View Discography" ] }, { "name": "Playlists", "playlists": [ "Late Night Coding", "Indie Discoveries", "Lo-Fi Focus", "Future Beats", "Road Trip Signals", "Ambient Rooms", "Creator Picks", "Underground Pulse" ], "buttons": [ "Open Playlist", "Save Playlist", "Play All" ] }, { "name": "Queue / Mini Player", "description": "Create a persistent mini player that remains visible while scrolling without blocking content.", "elements": [ "Current track", "Artist", "Mini cover", "Play/Pause", "Next", "Previous", "Volume", "Queue", "Progress" ], "buttons": [ "Next Track", "Previous Track", "Open Queue", "Clear Queue" ] }, { "name": "Upload Studio", "message": "Upload flow is simulated. Only use audio you have rights to publish.", "fields": [ "Drag & drop placeholder", "Track title", "Artist name", "Genre", "Tags", "Cover upload placeholder", "Visibility", "License placeholder", "Description" ], "buttons": [ "Upload Demo Track", "Analyze Audio", "Preview Upload", "Publish Demo" ] }, { "name": "Creator Analytics", "metrics": [ "Plays", "Likes", "Followers", "Reposts placeholder", "Fictional listener locations", "Top tracks", "Completion rate", "Engagement score" ], "buttons": [ "Open Analytics", "Compare Tracks", "Download Report" ] }, { "name": "Discover / Genres", "genres": [ "Electronic", "Hip-Hop", "Indie", "Ambient", "Podcast", "Beats", "Lo-Fi", "Experimental", "Rock", "House", "Chill", "Focus" ], "button": "Explore Genre" }, { "name": "Community", "options": [ "Comments", "Reposts placeholder", "Creator circles", "Listening rooms", "Weekly challenges", "Fan messages", "Collaborations", "Feedback groups" ], "buttons": [ "Join Listening Room", "Post Feedback", "Start Collaboration", "Share Playlist" ] }, { "name": "Creator Monetization", "note": "Revenue examples are fictional and not guaranteed.", "elements": [ "Supporter tips placeholder", "Fan subscriptions placeholder", "Track licensing concept", "Merch link placeholder", "Creator plans", "Fictional revenue analytics" ], "buttons": [ "Enable Supporter Tips", "Create Fan Offer", "View Revenue Demo" ] }, { "name": "Pricing / Membership", "plans": [ "Free Listener", "Audio Plus", "Creator Starter", "Studio Pro", "Label Hub" ], "recommended_plan": "Creator Starter", "buttons": [ "Choose Plan", "Start Free" ] }, { "name": "Testimonials", "testimonials": [ "WaveCloud made discovering underground tracks feel visual and alive.", "The waveform comments helped listeners react to exact moments.", "Creator analytics made uploads feel more intentional and professional." ] }, { "name": "FAQ", "questions": [ "Is this an official SoundCloud website?", "Are the tracks and artists real?", "Can I upload real audio?", "Can I comment on waveforms?", "Can I create playlists?", "Can creators earn money here?", "Is the experience responsive on mobile?" ], "note": "Clearly state that this is an original fictional platform with no affiliation with SoundCloud or any other real brand." }, { "name": "Signup / Contact", "fields": [ "Name", "Email", "Username", "Account Type", "Favorite Genre", "Creator Interest", "Plan Interest", "Message", "Consent Checkbox" ], "checkbox": "I understand this is a fictional audio platform concept with simulated tracks and creator data.", "button": "Create WaveCloud Account" } ], "footer": { "text": "Original fictional audio platform concept. Not affiliated with SoundCloud or any real audio streaming brand.", "links": [ "Discover", "Tracks", "Artists", "Playlists", "Upload", "Creator Tools", "Community", "Pricing", "Contact", "Terms", "Privacy", "Copyright Note", "Social links" ] } }, "required_interactions": [ "The menu must navigate smoothly to each section.", "Enter Sound Universe must activate a guided animation in the 3D canvas.", "Play Featured Track must go to Featured Player and activate the player.", "Upload Demo Track must go to Upload.", "Search WaveCloud must filter or show simulated results.", "Canvas hotspots must show information.", "Play Track must activate simulated playback and visualizer.", "Pause Track must pause state.", "Like Track must change state.", "Add to Playlist must save the track.", "Share Track must show confirmation.", "Play Preview must load the track in the player.", "Like must change state.", "Add to Queue must update the queue.", "More Info must open details.", "Play Now must load the player.", "Follow Artist must change state.", "Add Comment must add a simulated comment.", "Close must close the panel.", "Add Timestamp Comment must add a comment.", "React must show a reaction.", "Jump to Moment must move progress.", "Hide Comments must hide comments.", "Open Artist must open profile.", "Follow must change state.", "Play Top Track must load the player.", "Message Artist must open a simulated chat.", "View Discography must open a list.", "Open Playlist must open details.", "Save Playlist must change state.", "Play All must load the queue.", "Next Track must change song.", "Previous Track must go back.", "Open Queue must open the queue.", "Clear Queue must clear the queue.", "Analyze Audio must generate a simulated waveform.", "Preview Upload must open preview.", "Publish Demo must validate fields and show confirmation.", "Open Analytics must open a panel.", "Compare Tracks must show comparison.", "Download Report must show confirmation.", "Explore Genre must filter tracks or focus a canvas section.", "Join Listening Room must change state.", "Post Feedback must open a form.", "Start Collaboration must open a request.", "Share Playlist must show confirmation.", "Enable Supporter Tips must activate state.", "Create Fan Offer must open a form.", "View Revenue Demo must open a dashboard.", "Choose Plan must select a plan and show a summary.", "Start Free must go to Signup.", "FAQ must expand and collapse correctly.", "Create WaveCloud Account must validate fields, checkbox and show confirmation.", "The mobile menu must open and close correctly.", "All buttons must have hover, active state and visual feedback." ], "animations": [ "The camera should move from the studio toward the player, waveform, tracks, track detail, comments, artists, playlists, upload, analytics, community, monetization, pricing and signup.", "The waveform should react with visual pulses when the track is in simulated playback.", "Vinyl records should rotate smoothly with depth.", "Covers should appear using translateZ, scale and fade.", "Visualizers should pulse with bars and visually synchronized particles.", "Track cards should slide like a 3D audio library.", "Timestamp comments should appear over specific waveform points.", "Artist avatars should float with a micro-bounce.", "Playlists should stack like 3D shelves.", "The mini player should enter and remain persistent with a smooth transition.", "The upload studio should generate a waveform as if analyzing audio.", "Creator analytics dashboards should assemble with widgets.", "Pricing cards should lift with 3D hover.", "The form should appear from depth with a clean transition." ], "visual_style": { "description": "Musical, social, premium, creative, modern, dark, energetic and visual.", "palette": [ "Studio black", "Original orange", "Night violet", "Deep blue", "Electric cyan", "Cool white", "Success green", "Soft pink", "Graphite gray", "Soft red for errors" ], "assets": [ "Dark glassmorphism", "Clean cards", "3D player", "Glowing waveforms", "Floating covers", "Speakers", "Vinyl records", "Visualizers", "Comments", "Avatars", "Soft shadows", "Rounded borders" ] }, "expected_result": "A complete, immersive and functional landing page for “SoundCloud Clone 3D”, with an original “WaveCloud”-style identity, 3D canvas, digital music studio, featured player, waveforms, fictional tracks, track detail, waveform comments, artists, profiles, playlists, persistent mini player, upload studio, creator analytics, discover/genres, community, simulated creator monetization, pricing, testimonials, FAQ, signup, functional form with fictional concept checkbox, 3D scroll animations, parallax, hotspots, functional buttons, responsive design, generous margins, clear component separation and a premium original music platform aesthetic." }
Landing Pages
landing page
studio
Studio
Create a premium web landing page called “Studio3D”. Design a modern, minimalist, dark, elegant and professional experience for a creative studio specialized in branding, visual identity, motion graphics, 3D design, audiovisual production, art direction and digital experiences. The page should use a deep black background, bold uppercase typography, neon green accents, dark glassmorphism cards, generous negative space and a premium editorial aesthetic. In the header, include the “STUDIO3D” logo, a menu with “Home”, “Services”, “Projects”, “Process” and a highlighted “Book a Call” button. The hero should feature the large title “ENTER OUR” with a minimal “SCROLL” indicator and subtle green particles in the background. Create a services section with side cards for “Branding & Identity” and “Motion Graphics”, using a vertical green border, short descriptions, soft hover states and parallax. Add a process section with four numbered steps: “01 Discovery”, “02 Art Direction”, “03 Production” and “04 Delivery”, each with short text, thin lines, green numbers and reveal animations. Create a centered contact section with the text “Book a strategic call or send us your brief”, fields for “Your Name”, “Your Email”, a “Select a service” dropdown, a textarea “Tell us about your project...” and a green “Send Brief” button. Add a floating price card at the bottom-right with the text “Web page”, price “20 US$”, a “Buy” button and small accepted payment method icons. The landing page must be responsive, with smooth scrolling, microinteractions, button hover states, entrance animations, spacious composition, clean design, a premium creative studio style and the feeling of a sophisticated 3D portfolio.
Landing Pages
landing page
vertex
Vertex
Create a premium web landing page called “Vertex 3D”. Design a modern, dark, technological, immersive and enterprise-grade experience for a fictional centralized artificial intelligence platform focused on autonomous agents, model analysis, workflow orchestration, global telemetry and advanced automation. The page should use a deep black background, futuristic aesthetics, cyan/neon accents, digital particles, glassmorphism cards, generous negative space and a premium SaaS composition. In the header, include the “VERTEX 3D” logo, a menu with “Platform”, “Agents”, “Metrics” and a highlighted “Request Demo” button. The hero should display the large title “The Central Core of AI Intelligence”, a subtitle about deploying agents, analyzing models and orchestrating automated workflows inside an immersive 3D environment, plus the buttons “Initialize Core” and “View Documentation”. The hero background should include an abstract particle cloud, a 3D digital core, subtle lines and visual depth. Create a “Data Convergence” section with description text, a list of benefits such as real-time data syncing, encrypted neural pathways and automated pipeline generation, plus a “System Status” card with metrics like Node Uplink and Data Ingestion. Create an “Autonomous Agents” section with an active workflows card and text explaining how AI agents can be deployed across complex infrastructure, with a “Deploy Agent Cluster” button. Create a “Global Telemetry” section with KPI cards: Active Models, Inferences / Sec and Avg Latency. Add a final conversion section with the title “Ready to enter the Vertex?”, an email field and an “Initialize Access” button. Include a floating price card at the bottom-right with the text “Web page”, price “20 US$”, a “Buy” button and small accepted payment method icons. The page must be responsive, with smooth scrolling, entrance animations, parallax, hover states, microinteractions, dark cards with subtle cyan borders and the feeling of a high-end enterprise AI platform.
Landing Pages
landing page
viable
Viable Clone — Product feedback platform
Create a premium web landing page called “InsightPulse 3D”. Objective: Develop a modern, SaaS-style, intelligent, immersive and functional landing page for a fictional and original AI-powered customer feedback analysis platform. The platform should include qualitative research, automatic opinion classification, sentiment analysis, theme detection, insight prioritization, dashboards, executive reports, integrations, feedback inbox, automatic summaries, business questions, alerts, team collaboration, trend tracking and premium plans. The page must allow users to connect feedback sources, analyze simulated comments, generate insights, open dashboards, filter themes, create reports, compare segments, assign actions, choose plans, request a demo and sign up. It must include a 3D canvas, 3D scroll animations, parallax effects, a 3D comment cloud, insight nodes, analysis panels, feedback cards, charts, tags, executive summaries, hotspots, functional forms and fully operational buttons. Brand note: Create an original fictional platform inspired by modern feedback analysis, customer intelligence and product insights tools, but do not copy logos, commercial names, exact visual identities, official copy, proprietary assets, official colors, specific visual structures, reports, models, examples or exact designs from Viable or any other real brand. Use an original brand such as “InsightPulse”, “FeedbackLens”, “SignalVoice”, “CustomerOrbit” or “VoiceMap AI”. Keep the conceptual functionality of analyzing customer feedback with AI, detecting themes, summarizing insights and prioritizing decisions, but use completely original branding, UI, data, copy, metrics, dashboards, reports and examples. Main concept: The website should feel like entering a 3D customer intelligence laboratory where thousands of comments visually transform into themes, patterns, emotions, opportunities and actionable decisions. As the user scrolls, the camera should move from a chaotic cloud of messages into an analysis core, sort feedback by theme, detect sentiment, cluster comments, generate executive insights, create alerts, open reports, connect integrations and end at a demo or signup CTA. Main requirements: Create a complete, modern, functional and responsive landing page. Suggested name or route: “viable-clone”. Include a visible 3D canvas integrated into the main experience. Add 3D scroll animations. Add parallax effects on text, comments, nodes, tags, dashboards, charts, reports, integrations, buttons, forms and backgrounds. All buttons must work correctly. Optimize for desktop, tablet and mobile. Use smooth, analytical, precise and performant animations. Keep the scene clear, premium, trustworthy, technical, organized and easy to navigate. Use fictional data for comments, customers, sources, themes, sentiments, insights, metrics, reports, segments, integrations and plans. Do not promise perfect accuracy, guaranteed decisions, absolute interpretation of intent or guaranteed business outcomes. Include messages such as “AI-generated insights are simulated”, “feedback data is fictional” and “review insights before making product decisions”. Page structure: Header with logo “INSIGHTPULSE”, menu links Home, Feedback, Insights, Dashboards, Reports, Integrations, Pricing and Contact. Buttons: “Start Analyzing” and “Book Demo”. Fixed header with glassmorphism, functional mobile hamburger menu and smooth scrolling. Hero with title “Turn Customer Feedback Into Actionable 3D Insights”, subtitle “Analyze fictional feedback from reviews, support tickets, surveys and product channels to discover themes, sentiment, trends and next-best actions.”, input “What feedback do you want to understand?”, source selector and button “Generate Insight Map”. Buttons: “Enter Insight Cloud”, “Explore Feedback” and “Book Demo”. Include visible text: “Demo feedback workspace with simulated customer data and AI outputs.” 3D Canvas / Insight Cloud Experience: Create a 3D scene with a comment cloud, feedback bubbles, theme nodes, sentiment-based colors, floating tags, source panel, trend dashboard, segment map, executive report, alerts, integrations grid, evidence cards, recommendation cards and a floating demo or signup CTA. The “Enter Insight Cloud” button must trigger an animation where the camera enters the cloud, clusters feedback by theme, colors sentiment, detects trends, generates an insight, shows evidence, creates a report and ends in front of the “Start Analyzing” CTA. Hotspots: “Feedback Sources”, “Theme Detection”, “Sentiment Analysis”, “Insight Summary”, “Evidence Cards”, “Trend Dashboard”, “Executive Report” and “Start Analyzing”. Sections: Platform Overview with title “Understand What Customers Are Really Saying” and cards “Feedback Aggregation”, “AI Theme Detection”, “Sentiment & Trends” and “Executive Reports”. Feedback Sources with fictional sources such as Support Tickets, Product Reviews, NPS Surveys, Sales Notes, Community Posts, Churn Interviews, Feature Requests, App Store Reviews, Chat Transcripts and Help Center Feedback. Feedback Inbox with fictional comments, sentiment, theme, priority, segment and actions. Theme Detection with 3D clusters for themes such as Onboarding Friction, Pricing Confusion, Export Requests, Mobile Filters, Notification Overload, Integration Setup, Billing Clarity and Search Quality. Sentiment Analysis with Positive, Neutral, Negative, Mixed, Urgent, trend over time, segment comparison and source comparison. Insight Generator with business question, selected sources, time range, segment, generated summary, evidence quotes, confidence placeholder and recommended actions. Insight Detail with executive summary, evidence, related themes, fictional impact, urgency, recommendation, owner and status. Trends Dashboard with KPIs, bars, lines, simple heatmap and KPI cards. Reports with an executive report generator. Customer Segments with New Users, Power Users, Enterprise Admins, Trial Accounts, Churn Risk, Mobile Users, Support Heavy and High Value Accounts. Alerts, Collaboration, Integrations, Security / Data Controls, Use Cases, Pricing, Testimonials, FAQ, Signup / Contact and Footer. Required interactions: The menu must navigate smoothly to each section. “Enter Insight Cloud” must activate a guided animation in the 3D canvas. “Explore Feedback” must go to Feedback Inbox. “Book Demo” must go to Contact or Signup. “Generate Insight Map” must create a simulated map based on the selected source. Hotspots must show information. All buttons must have hover, active state and visual feedback. Forms must validate fields and show confirmation. The mobile menu must open and close correctly. FAQ must expand and collapse correctly. Visual style: Premium AI SaaS, customer intelligence, analytical, modern, clear, strategic, trustworthy and professional. Suggested palette: midnight blue, electric cyan, insight violet, clean white, cloud gray, graphite black, success green, alert amber, soft red for errors and subtle silver. Use glassmorphism, clean cards, a 3D comment cloud, connected nodes, theme clusters, tags, dashboards, reports, charts, data lines, soft shadows, rounded borders and breathable composition. Expected result: A complete, immersive and functional landing page for “Viable Clone 3D”, with an original “InsightPulse”-style identity, 3D canvas, feedback cloud, sources, inbox, theme detection, sentiment analysis, insight generator, insight detail, trends dashboard, reports, customer segments, alerts, collaboration, integrations, data controls, use cases, pricing, testimonials, FAQ, signup, functional form with fictional concept checkbox, 3D scroll animations, parallax, hotspots, functional buttons, responsive design, generous margins, clear component separation and a premium original customer intelligence platform aesthetic.
Landing Pages
landing page
vuelos
Vuelos
Create a premium web landing page called “AeroVista Vuelos 3D”. Design a modern, dark, immersive and technological experience for a fictional flight search and booking platform with 3D global route visualization, flexible calendar, price alerts, trip customization, seat selection and simulated checkout. The page should use a deep black background with subtle stars, a large partially visible 3D globe, airline route lines, glassmorphism cards, soft borders, elegant shadows and cyan-blue accents. In the hero, show a floating card with the title “AeroVista Vuelos 3D”, the subtitle “Experience the future of flight booking.”, From and To fields with examples “JFK - New York” and “NRT - Tokyo”, a primary “Search Flights” button and a note explaining that flights, prices and availability are simulated. Create a “Global Routes” section with a KPI card showing active routes and explaining that flights cross the globe in real-time 3D. Create a “Flexible Calendar” section with date cards, fictional prices, a price alert and a “Track” button. Create a “Customize Flight” section with Economy and Premium options, visual seat selection, baggage extras and a “Continue to Checkout” button. Create a final boarding pass-style card with the route “JFK → NRT”, fictional passenger, seat, gate, boarding time, flight code and decorative barcode. Include a floating price card at the bottom-right with the text “Web page”, price “20 US$”, a “Buy” button and small accepted payment method icons. The landing page must be responsive, with smooth scrolling, entrance animations, parallax, cards appearing from depth, hover states, functional buttons and a premium futuristic travel platform aesthetic.
Landing Pages
3D
architecture
3D Architecture Portfolio — Studio flagship
A flagship studio portfolio built to showcase signature projects, hero renders, and premium positioning. A polished studio portfolio designed to present flagship projects, hero renders, and brand positioning. A studio showcase portfolio highlighting projects, renders, and walkthroughs. An architecture portfolio in light mode with a virtual plaza where each project has an entry point. Clicking a project triggers a guided camera walkthrough that visits key spaces. At points of interest, project videos play (interviews, construction timelapses, animated renders) projected on 3D panels or HTML overlays. Layer toggles for structure, finishes, and furniture — each activates/deactivates 3D models and adjusts materials. A before/after slider blends renders with real photos. Technical documentation includes PDF plan downloads and high‑resolution image gallery. Free WASD navigation and guided fly‑through mode. Hotspots with micro‑videos and technical notes appear on selection. LOD, culling, 1024px textures. Videos 1080p. Accessibility: subtitles, transcripts, prefers-reduced-motion, 2D version with video list. **Deliverables:** index.html, styles.css, arch3d.js, assets/ (GLB models, walkthrough videos, plan PDFs). **Stack:** Three.js, video HTML5, GSAP. **Interactions:** Walkthrough guided with videos per point of interest, layer toggles, before/after slider, plan downloads, free WASD mode.
Landing Pages
3D
architecture
3D Architecture Portfolio — Client review route
A client-review portfolio structured as a presentation route for plans, scope, and before/after decisions. A concept-led architecture route that emphasizes narrative, spatial rhythm, and design exploration. A client-facing walkthrough portfolio built to present spaces, plans, and before/after stories. Build a 3D architectural portfolio with guided walkthroughs, project videos combining real footage with renders, and downloadable plans. **Deliverables:** index.html, styles.css, arch3d.js, assets/ folder with GLB building models, walkthrough videos, and PDF plans. **Stack:** Three.js, HTML5 video, postprocessing, GSAP. **Description:** Present architectural projects through 3D walkthroughs and project videos combining real shots with renders. The user can explore the building in 3D and, at key points, play videos showing construction, interviews, and technical details. **Video & plans integration:** Videos play in 3D panels or HTML overlays; plans and sections displayed as downloadable PDFs. Each point of interest has an asset package: video, photos, plan, and spec sheet. **Navigation controls:** Guided walkthrough with camera following a route; free mode with WASD/drag. Hotspots with microvideos and notes; "before/after" slider option. **Visual fidelity & performance:** LOD-optimized models; HDRI for realistic lighting; subtle postprocessing. 1080p videos for desktop, 720p for mobile; adaptive streaming. **Accessibility & documentation:** Subtitles, transcripts, and technical descriptions. ARIA on hotspots and role="dialog" for video modals. **Metrics:** Time in walkthrough, most-visited hotspots, plan downloads, video plays.
Landing Pages
3D
architecture
3D Architecture Portfolio — Concept discovery tour
A concept-led tour that highlights spatial narrative, massing, and exploratory design ideas. A client-facing walkthrough landing built to review scope, plans, and project decisions in detail. A concept-heavy architecture version focused on guided tours and story-driven projects. A light mode architecture portfolio where each project has a virtual plaza entry point. Entering triggers a predefined camera route showing key spaces. At points of interest, project videos play including interviews, construction timelapses, and animated renders. Videos project on 3D panels or HTML overlays. Layer toggles for structure, finishes, furniture — each activates/deactivates GLB models and adjusts materials. A 'before/after' slider blends renders with real photos. Technical documentation: PDF plan downloads and high-res image gallery. Navigation: free WASD mode and guided fly-through. Hotspots with micro-videos and technical notes appear with reveal animation. LOD, culling, 1024px textures. 1080p video for desktop, 720p for mobile. **Deliverables:** index.html, styles.css, arch3d.js, assets/ (GLB models, walkthrough videos, PDF plans, SRT, transcripts). **Stack:** Three.js, video HTML5, GSAP. **Interactions:** Guided walkthrough with video per POI, layer toggles, before/after slider, PDF download.
Landing Pages
3D
art museum
3D Art Museum with Guided Curation and Video Projections
Build a 3D curated art museum where each artwork has a curatorial video explaining context, technique, and anecdotes. The visitor can activate a guided curation that plays a video sequence and moves the camera with elegant transitions. **Deliverables:** index.html, styles.css, museum.js, assets/ folder with curatorial videos, artwork models, and metadata. **Stack:** Three.js, HTML5 video, GSAP, search index. **Description:** A 3D curated museum tour where each artwork features a curatorial video. The visitor can activate a guided curation that plays a sequenced video tour with camera transitions. Free explore mode also available. **Video & metadata presentation:** Side panel with transcript and technical sheet; video in 3D panel or overlay. Language options and subtitles; downloadable catalog PDF. **Curatorial interactions:** "Curator" mode with voiceover and chapter markers; "Explore" free mode. Favorites and personal notes saved locally. **Accessibility:** Subtitles, artwork descriptions for visually impaired, ARIA on controls.
Landing Pages
3D
artist
3D Freelance Portfolio for 3D Artist with Reels, Breakdowns and Process Videos
A 3D gallery where each artwork has a reel and a breakdown video showing the pipeline (modeling, texturing, lighting). Selecting a work triggers a camera fly‑to and the breakdown plays with overlays showing nodes and settings; the user can pause on any frame and see exact parameters (shaders, maps). A 'Compare' mode shows before/after and a button exports the settings as JSON. Proxy videos for scrubbing, LOD for models. Accessibility: subtitles, transcripts. Analytics: breakdowns viewed, settings exported. **Deliverables:** index.html, styles.css, artist3d.js, assets/ (reels, breakdown videos, models). **Stack:** Three.js, video textures, WebAudio API, GSAP. **Interactions:** Click artwork opens breakdown with synced pipeline node overlays, compare before/after, export settings JSON.
Landing Pages
3D
charity gala
3D Charity Gala with Stage, Testimonial Videos and Live Auction
An elegant virtual charity gala: central stage for presentations, panels for testimonial videos (60-180s) projected on 3D screens with subtitles and transcripts, and a live auction section. Auction managed via UI: each lot has a 3D card with video and description; users bid via form (UI simulation) and the auction shows a timeline with simulated bids. During the gala, the camera alternates between presenter and testimonial screens with cinematic transitions; key moments (announcements, winning bids) generate highlight clips saved to a gallery. Donor mode shows benefits and allows receipt download. Performance: adaptive streaming, LOD for decorations. Accessibility: subtitles, transcripts, aria on forms, prefers-reduced-motion. Privacy: explain data use for donations. Metrics: simulated donations, bids, testimonial plays. Legal recommendations for auctions and data handling included. **Deliverables:** index.html, styles.css, gala3d.js, assets/ (testimonial videos, GLB stage models, audio tracks). **Stack:** Three.js, HLS.js, WebRTC, GSAP. **Interactions:** Auto camera cycling, auction bidding with timeline, donor mode with receipt download, highlight clips with M key, testimonial video panels.
Landing Pages
3D
cinematic
Cinematic 3D Scene with Integrated Short Film and Timeline Control
Build an immersive cinematic 3D scene where a chapter-based short film drives lighting, camera, and particles in real time through a scrubbable timeline. **Deliverables:** index.html, styles.css, cinema.js, assets/ folder with chaptered short film, stem audio tracks, models, and LUTs. **Stack:** Three.js, HTML5 video, postprocessing (bloom, color grading), GSAP for timeline. **Description:** A short film integrates into a 3D scene: floating panels play chapters while scene lighting, camera, and particles react in real time to the audio track and video markers, creating an immersive audiovisual narrative. **Timeline structure:** Short film divided into chapters (cap1, cap2…). Each chapter has JSON metadata with start, end, cameraCue, lightingCue, particleCue. An interactive timeline allows scrubbing; moving the scrubber smoothly interpolates camera and effects between cues. **Scrubbing & chapter jumping:** GSAP interpolates camera and postprocessing params (exposure, bloom) toward the target chapter values. Audio crossfade between stems when chapter changes. Synchronized subtitles and notes appear. **Video & texture integration:** Videos as textures on 3D planes for projections; HTML overlays for subtitles and accessibility. Low-resolution proxy versions used during scrubbing; high-quality versions loaded on pause. **Controls & microinteractions:** Play/Pause, Chapters, Cinematic Mode (auto camera dolly), Explorer Mode (free control). Chapter markers with thumbnail previews; share link with timestamp. **Accessibility & fallback:** Full transcript and linear version of the short film with navigable chapters. prefers-reduced-motion disables non-essential camera movements and offers direct cuts between chapters. **Visual quality & performance:** LUTs for color grading in postprocessing; HDRI for realistic lighting. Aggressive LOD and culling; pause render when canvas is off-viewport. Preload audio stems; AudioContext for precise sync. **Testing & metrics:** Measure scrubbing latency, chapter load times, chapter drop-off rate. Test on desktop and mobile across varied network profiles.
Landing Pages
3D
typography
3D Cinematic Typography Show with Background Video and Musical Control
Build a typography show where 3D letters react to music and an atmospheric background video. The user can select audio stems that alter animation and color grading. **Deliverables:** index.html, styles.css, typeShow.js, assets/ folder with atmospheric video, audio stems, and typography models. **Stack:** Three.js, WebAudio API, HTML5 video, GSAP. **Description:** A typographic spectacle where 3D letters react to music and an atmospheric background video. Floating metallic letters respond to real-time audio FFT analysis. Video cues trigger material changes and typographic morphing. **Audio-video-typography sync:** Real-time audio analysis (FFT) generates movement parameters. Video cues trigger material changes. Letters pulse, rotate, and scale with frequency bands. **Controls:** Stem selector, video scrubbing, mood presets (calm, energetic). Frame export for moodboards. **Accessibility:** Subtitles for any narration; prefers-reduced-motion to disable intense movements.
Landing Pages
3D
classroom
3D Light Mode Classroom with Video Lessons and Synchronized Simulations
A virtual classroom in light mode with pale wood and navy accents. Each lesson combines a tutorial video with a synchronized 3D simulation. The video acts as master clock: timeupdate events fire cues that update the simulation (positions, forces, parameters). For a dynamics lesson, the video shows the experiment and the simulation reproduces the exact pendulum trajectory; the student can pause and manipulate parameters (mass, friction), and the simulation recalculates in real time. UI includes a timeline with chapter markers; scrubbing uses low-res proxy video while updating the simulation frame-by-frame. Lessons are divided into loadable modules (pendulum, inclined plane, spring). For exercises, the student receives a prompt and adjusts parameters to reach a target; on completion a solution video plays. Synchronization: AudioContext for audio/video alignment, GSAP for 3D animation interpolation. Heavy physics calculations run in a Web Worker. State is saved per module in IndexedDB for session resume. **Deliverables:** index.html, styles.css, classroom3d.js, assets/ (videos, GLB models, datasets, transcripts, SRT subtitles).
Landing Pages
3D
classroom
Elegant 3D Classroom with Synchronized Video Lessons and Interactive Exercises
Build an elegant 3D virtual classroom where video tutorials and 3D simulations are fully synchronized, with interactive sandbox exercises. **Deliverables:** index.html, styles.css, classroom.js, assets/ folder with lesson videos, 3D instrument models, and datasets. **Stack:** A-Frame or Three.js, HTML5 video, WebAudio API, GSAP, Web Workers for calculations. **Description:** Multimedia lessons where each module combines a video tutorial with a synchronized 3D simulation. For example, in a physics lesson the video explains an experiment while the 3D simulation reproduces each step — allowing the student to pause, scrub, and modify parameters in real time. **Video-simulation sync:** Video acts as master clock; simulation listens to timeupdate events and applies predefined states (positions, forces) at key moments. GSAP Timeline coordinates 3D animations with video chapter markers. Scrubbing the video advances/rewinds the simulation frame-by-frame. **Interactive exercises:** Sandbox — change variables (mass, friction) and see real-time results. Challenge — complete a task within a time limit; on completion a solution video plays with explanation. Comparator — run two configurations side by side with synchronized videos. **Video presentation:** Segmented clips (30–120s) with SRT and transcripts. Full-lesson fullscreen mode with notes and questions overlay. Videos optimized for streaming with playsinline on mobile. **Controls & accessibility:** Downloadable subtitles and transcripts. Speed controls (0.5x, 1x, 1.5x) that also affect the simulation. prefers-reduced-motion reduces animations and offers a static version with graphics. **Precision & reproducibility:** Deterministic simulations with fixed seed; export parameters as JSON to replay sessions. Interaction logging to replay student sessions and generate automated feedback. **Performance:** Heavy calculations in Web Workers; 3D render separated from physics loop. Lazy-load modules per lesson; free memory on module switch. Tested on low-end devices for acceptable minimum experience. **Educational metrics:** Video view time, attempts per exercise, most-tested parameters, success rate. Export instructor reports with timestamps linked to video events.
Landing Pages
Product Scroll 3D
Scroll 3D
Aura Skin — 3D Scroll Cosmetics Store
Create a Premium Next.js landing page for “Aura Skin”, a cosmetics brand. Use cinematic 3D scroll, real product imagery, a sticky hero, CSS perspective depth, editorial cards, smooth transitions, and a final CTA. Include App Router, next/image, TypeScript, responsive design, prefers-reduced-motion, SEO, accessibility, and organized components. Optimize all imagery and avoid heavy animation. Deliver a complete project ready to customize and deploy.
Landing Pages
Product Scroll 3D
Scroll 3D
Nébula Beauty — 3D Scroll Cosmetics Store
Create a Premium Next.js landing page for “Nébula Beauty”, a cosmetics brand. Use cinematic 3D scroll, real product imagery, a sticky hero, CSS perspective depth, editorial cards, smooth transitions, and a final CTA. Include App Router, next/image, TypeScript, responsive design, prefers-reduced-motion, SEO, accessibility, and organized components. Optimize all imagery and avoid heavy animation. Deliver a complete project ready to customize and deploy.
Landing Pages
Product Scroll 3D
Scroll 3D
Ritual Lab — 3D Scroll Cosmetics Store
Create a Premium Next.js landing page for “Ritual Lab”, a cosmetics brand. Use cinematic 3D scroll, real product imagery, a sticky hero, CSS perspective depth, editorial cards, smooth transitions, and a final CTA. Include App Router, next/image, TypeScript, responsive design, prefers-reduced-motion, SEO, accessibility, and organized components. Optimize all imagery and avoid heavy animation. Deliver a complete project ready to customize and deploy.
Landing Pages
Product Scroll 3D
Scroll 3D
Savia Derm — 3D Scroll Cosmetics Store
Create a Premium Next.js landing page for “Savia Derm”, a cosmetics brand. Use cinematic 3D scroll, real product imagery, a sticky hero, CSS perspective depth, editorial cards, smooth transitions, and a final CTA. Include App Router, next/image, TypeScript, responsive design, prefers-reduced-motion, SEO, accessibility, and organized components. Optimize all imagery and avoid heavy animation. Deliver a complete project ready to customize and deploy.
Landing Pages
Product Scroll 3D
Scroll 3D
Luma Care — 3D Scroll Cosmetics Store
Create a Premium Next.js landing page for “Luma Care”, a cosmetics brand. Use cinematic 3D scroll, real product imagery, a sticky hero, CSS perspective depth, editorial cards, smooth transitions, and a final CTA. Include App Router, next/image, TypeScript, responsive design, prefers-reduced-motion, SEO, accessibility, and organized components. Optimize all imagery and avoid heavy animation. Deliver a complete project ready to customize and deploy.
Landing Pages
Product Scroll 3D
Scroll 3D
Onda Serum — 3D Scroll Cosmetics Store
Create a Premium Next.js landing page for “Onda Serum”, a cosmetics brand. Use cinematic 3D scroll, real product imagery, a sticky hero, CSS perspective depth, editorial cards, smooth transitions, and a final CTA. Include App Router, next/image, TypeScript, responsive design, prefers-reduced-motion, SEO, accessibility, and organized components. Optimize all imagery and avoid heavy animation. Deliver a complete project ready to customize and deploy.
Landing Pages
Product Scroll 3D
Scroll 3D
Velvet Glow — 3D Scroll Cosmetics Store
Create a Premium Next.js landing page for “Velvet Glow”, a cosmetics brand. Use cinematic 3D scroll, real product imagery, a sticky hero, CSS perspective depth, editorial cards, smooth transitions, and a final CTA. Include App Router, next/image, TypeScript, responsive design, prefers-reduced-motion, SEO, accessibility, and organized components. Optimize all imagery and avoid heavy animation. Deliver a complete project ready to customize and deploy.
Landing Pages
Product Scroll 3D
Scroll 3D
Aurelia — 3D Scroll Jewelry Store
Create a Premium Next.js landing page for “Aurelia”, a jewelry brand. Use cinematic 3D scroll, real product imagery, a sticky hero, CSS perspective depth, editorial cards, smooth transitions, and a final CTA. Include App Router, next/image, TypeScript, responsive design, prefers-reduced-motion, SEO, accessibility, and organized components. Optimize all imagery and avoid heavy animation. Deliver a complete project ready to customize and deploy.
Landing Pages
Product Scroll 3D
Scroll 3D
Maison Oro — 3D Scroll Jewelry Store
Create a Premium Next.js landing page for “Maison Oro”, a jewelry brand. Use cinematic 3D scroll, real product imagery, a sticky hero, CSS perspective depth, editorial cards, smooth transitions, and a final CTA. Include App Router, next/image, TypeScript, responsive design, prefers-reduced-motion, SEO, accessibility, and organized components. Optimize all imagery and avoid heavy animation. Deliver a complete project ready to customize and deploy.
Landing Pages
Product Scroll 3D
Scroll 3D
Nocturne Gems — 3D Scroll Jewelry Store
Create a Premium Next.js landing page for “Nocturne Gems”, a jewelry brand. Use cinematic 3D scroll, real product imagery, a sticky hero, CSS perspective depth, editorial cards, smooth transitions, and a final CTA. Include App Router, next/image, TypeScript, responsive design, prefers-reduced-motion, SEO, accessibility, and organized components. Optimize all imagery and avoid heavy animation. Deliver a complete project ready to customize and deploy.
Landing Pages
Product Scroll 3D
Scroll 3D
Lustre — 3D Scroll Jewelry Store
Create a Premium Next.js landing page for “Lustre”, a jewelry brand. Use cinematic 3D scroll, real product imagery, a sticky hero, CSS perspective depth, editorial cards, smooth transitions, and a final CTA. Include App Router, next/image, TypeScript, responsive design, prefers-reduced-motion, SEO, accessibility, and organized components. Optimize all imagery and avoid heavy animation. Deliver a complete project ready to customize and deploy.
Landing Pages
Product Scroll 3D
Scroll 3D
Alma Joya — 3D Scroll Jewelry Store
Create a Premium Next.js landing page for “Alma Joya”, a jewelry brand. Use cinematic 3D scroll, real product imagery, a sticky hero, CSS perspective depth, editorial cards, smooth transitions, and a final CTA. Include App Router, next/image, TypeScript, responsive design, prefers-reduced-motion, SEO, accessibility, and organized components. Optimize all imagery and avoid heavy animation. Deliver a complete project ready to customize and deploy.
Landing Pages
Product Scroll 3D
Scroll 3D
Élan Fine — 3D Scroll Jewelry Store
Create a Premium Next.js landing page for “Élan Fine”, a jewelry brand. Use cinematic 3D scroll, real product imagery, a sticky hero, CSS perspective depth, editorial cards, smooth transitions, and a final CTA. Include App Router, next/image, TypeScript, responsive design, prefers-reduced-motion, SEO, accessibility, and organized components. Optimize all imagery and avoid heavy animation. Deliver a complete project ready to customize and deploy.
Landing Pages
Product Scroll 3D
Scroll 3D
Círculo — 3D Scroll Jewelry Store
Create a Premium Next.js landing page for “Círculo”, a jewelry brand. Use cinematic 3D scroll, real product imagery, a sticky hero, CSS perspective depth, editorial cards, smooth transitions, and a final CTA. Include App Router, next/image, TypeScript, responsive design, prefers-reduced-motion, SEO, accessibility, and organized components. Optimize all imagery and avoid heavy animation. Deliver a complete project ready to customize and deploy.
Landing Pages
Product Scroll 3D
Scroll 3D
Forma Studio — 3D Scroll Fashion Store
Create a Premium Next.js landing page for “Forma Studio”, a fashion brand. Use cinematic 3D scroll, real product imagery, a sticky hero, CSS perspective depth, editorial cards, smooth transitions, and a final CTA. Include App Router, next/image, TypeScript, responsive design, prefers-reduced-motion, SEO, accessibility, and organized components. Optimize all imagery and avoid heavy animation. Deliver a complete project ready to customize and deploy.
Landing Pages
Product Scroll 3D
Scroll 3D
Norte Atelier — 3D Scroll Fashion Store
Create a Premium Next.js landing page for “Norte Atelier”, a fashion brand. Use cinematic 3D scroll, real product imagery, a sticky hero, CSS perspective depth, editorial cards, smooth transitions, and a final CTA. Include App Router, next/image, TypeScript, responsive design, prefers-reduced-motion, SEO, accessibility, and organized components. Optimize all imagery and avoid heavy animation. Deliver a complete project ready to customize and deploy.
Landing Pages
Product Scroll 3D
Scroll 3D
Silhouette — 3D Scroll Fashion Store
Create a Premium Next.js landing page for “Silhouette”, a fashion brand. Use cinematic 3D scroll, real product imagery, a sticky hero, CSS perspective depth, editorial cards, smooth transitions, and a final CTA. Include App Router, next/image, TypeScript, responsive design, prefers-reduced-motion, SEO, accessibility, and organized components. Optimize all imagery and avoid heavy animation. Deliver a complete project ready to customize and deploy.
Landing Pages
Product Scroll 3D
Scroll 3D
Atempo — 3D Scroll Fashion Store
Create a Premium Next.js landing page for “Atempo”, a fashion brand. Use cinematic 3D scroll, real product imagery, a sticky hero, CSS perspective depth, editorial cards, smooth transitions, and a final CTA. Include App Router, next/image, TypeScript, responsive design, prefers-reduced-motion, SEO, accessibility, and organized components. Optimize all imagery and avoid heavy animation. Deliver a complete project ready to customize and deploy.
Landing Pages
Product Scroll 3D
Scroll 3D
Materia — 3D Scroll Fashion Store
Create a Premium Next.js landing page for “Materia”, a fashion brand. Use cinematic 3D scroll, real product imagery, a sticky hero, CSS perspective depth, editorial cards, smooth transitions, and a final CTA. Include App Router, next/image, TypeScript, responsive design, prefers-reduced-motion, SEO, accessibility, and organized components. Optimize all imagery and avoid heavy animation. Deliver a complete project ready to customize and deploy.
Landing Pages
Product Scroll 3D
Scroll 3D
Vanta Wear — 3D Scroll Fashion Store
Create a Premium Next.js landing page for “Vanta Wear”, a fashion brand. Use cinematic 3D scroll, real product imagery, a sticky hero, CSS perspective depth, editorial cards, smooth transitions, and a final CTA. Include App Router, next/image, TypeScript, responsive design, prefers-reduced-motion, SEO, accessibility, and organized components. Optimize all imagery and avoid heavy animation. Deliver a complete project ready to customize and deploy.
Landing Pages
Product Scroll 3D
Scroll 3D
Fuego Mesa — 3D Scroll Restaurants Store
Create a Premium Next.js landing page for “Fuego Mesa”, a restaurants brand. Use cinematic 3D scroll, real product imagery, a sticky hero, CSS perspective depth, editorial cards, smooth transitions, and a final CTA. Include App Router, next/image, TypeScript, responsive design, prefers-reduced-motion, SEO, accessibility, and organized components. Optimize all imagery and avoid heavy animation. Deliver a complete project ready to customize and deploy.
Landing Pages
Product Scroll 3D
Scroll 3D
Casa Umami — 3D Scroll Restaurants Store
Create a Premium Next.js landing page for “Casa Umami”, a restaurants brand. Use cinematic 3D scroll, real product imagery, a sticky hero, CSS perspective depth, editorial cards, smooth transitions, and a final CTA. Include App Router, next/image, TypeScript, responsive design, prefers-reduced-motion, SEO, accessibility, and organized components. Optimize all imagery and avoid heavy animation. Deliver a complete project ready to customize and deploy.
Landing Pages
Product Scroll 3D
Scroll 3D
Origen — 3D Scroll Restaurants Store
Create a Premium Next.js landing page for “Origen”, a restaurants brand. Use cinematic 3D scroll, real product imagery, a sticky hero, CSS perspective depth, editorial cards, smooth transitions, and a final CTA. Include App Router, next/image, TypeScript, responsive design, prefers-reduced-motion, SEO, accessibility, and organized components. Optimize all imagery and avoid heavy animation. Deliver a complete project ready to customize and deploy.
Landing Pages
Product Scroll 3D
Scroll 3D
Brasa Norte — 3D Scroll Restaurants Store
Create a Premium Next.js landing page for “Brasa Norte”, a restaurants brand. Use cinematic 3D scroll, real product imagery, a sticky hero, CSS perspective depth, editorial cards, smooth transitions, and a final CTA. Include App Router, next/image, TypeScript, responsive design, prefers-reduced-motion, SEO, accessibility, and organized components. Optimize all imagery and avoid heavy animation. Deliver a complete project ready to customize and deploy.
Landing Pages
Product Scroll 3D
Scroll 3D
Lima & Sal — 3D Scroll Restaurants Store
Create a Premium Next.js landing page for “Lima & Sal”, a restaurants brand. Use cinematic 3D scroll, real product imagery, a sticky hero, CSS perspective depth, editorial cards, smooth transitions, and a final CTA. Include App Router, next/image, TypeScript, responsive design, prefers-reduced-motion, SEO, accessibility, and organized components. Optimize all imagery and avoid heavy animation. Deliver a complete project ready to customize and deploy.
Landing Pages
Product Scroll 3D
Scroll 3D
Savia Cocina — 3D Scroll Restaurants Store
Create a Premium Next.js landing page for “Savia Cocina”, a restaurants brand. Use cinematic 3D scroll, real product imagery, a sticky hero, CSS perspective depth, editorial cards, smooth transitions, and a final CTA. Include App Router, next/image, TypeScript, responsive design, prefers-reduced-motion, SEO, accessibility, and organized components. Optimize all imagery and avoid heavy animation. Deliver a complete project ready to customize and deploy.
Landing Pages
Product Scroll 3D
Scroll 3D
Habitat One — 3D Scroll Real Estate Store
Create a Premium Next.js landing page for “Habitat One”, a real estate brand. Use cinematic 3D scroll, real product imagery, a sticky hero, CSS perspective depth, editorial cards, smooth transitions, and a final CTA. Include App Router, next/image, TypeScript, responsive design, prefers-reduced-motion, SEO, accessibility, and organized components. Optimize all imagery and avoid heavy animation. Deliver a complete project ready to customize and deploy.
Landing Pages
Product Scroll 3D
Scroll 3D
Lumen Estates — 3D Scroll Real Estate Store
Create a Premium Next.js landing page for “Lumen Estates”, a real estate brand. Use cinematic 3D scroll, real product imagery, a sticky hero, CSS perspective depth, editorial cards, smooth transitions, and a final CTA. Include App Router, next/image, TypeScript, responsive design, prefers-reduced-motion, SEO, accessibility, and organized components. Optimize all imagery and avoid heavy animation. Deliver a complete project ready to customize and deploy.
Landing Pages
Product Scroll 3D
Scroll 3D
Terra Living — 3D Scroll Real Estate Store
Create a Premium Next.js landing page for “Terra Living”, a real estate brand. Use cinematic 3D scroll, real product imagery, a sticky hero, CSS perspective depth, editorial cards, smooth transitions, and a final CTA. Include App Router, next/image, TypeScript, responsive design, prefers-reduced-motion, SEO, accessibility, and organized components. Optimize all imagery and avoid heavy animation. Deliver a complete project ready to customize and deploy.
Landing Pages
Product Scroll 3D
Scroll 3D
Altura — 3D Scroll Real Estate Store
Create a Premium Next.js landing page for “Altura”, a real estate brand. Use cinematic 3D scroll, real product imagery, a sticky hero, CSS perspective depth, editorial cards, smooth transitions, and a final CTA. Include App Router, next/image, TypeScript, responsive design, prefers-reduced-motion, SEO, accessibility, and organized components. Optimize all imagery and avoid heavy animation. Deliver a complete project ready to customize and deploy.
Landing Pages
Product Scroll 3D
Scroll 3D
Nómada Homes — 3D Scroll Real Estate Store
Create a Premium Next.js landing page for “Nómada Homes”, a real estate brand. Use cinematic 3D scroll, real product imagery, a sticky hero, CSS perspective depth, editorial cards, smooth transitions, and a final CTA. Include App Router, next/image, TypeScript, responsive design, prefers-reduced-motion, SEO, accessibility, and organized components. Optimize all imagery and avoid heavy animation. Deliver a complete project ready to customize and deploy.
Landing Pages
Product Scroll 3D
Scroll 3D
Casa Atlas — 3D Scroll Real Estate Store
Create a Premium Next.js landing page for “Casa Atlas”, a real estate brand. Use cinematic 3D scroll, real product imagery, a sticky hero, CSS perspective depth, editorial cards, smooth transitions, and a final CTA. Include App Router, next/image, TypeScript, responsive design, prefers-reduced-motion, SEO, accessibility, and organized components. Optimize all imagery and avoid heavy animation. Deliver a complete project ready to customize and deploy.
Landing Pages
Product Scroll 3D
Scroll 3D
Apex Motors — 3D Scroll Automotive Store
Create a Premium Next.js landing page for “Apex Motors”, a automotive brand. Use cinematic 3D scroll, real product imagery, a sticky hero, CSS perspective depth, editorial cards, smooth transitions, and a final CTA. Include App Router, next/image, TypeScript, responsive design, prefers-reduced-motion, SEO, accessibility, and organized components. Optimize all imagery and avoid heavy animation. Deliver a complete project ready to customize and deploy.
Landing Pages
Product Scroll 3D
Scroll 3D
Torque One — 3D Scroll Automotive Store
Create a Premium Next.js landing page for “Torque One”, a automotive brand. Use cinematic 3D scroll, real product imagery, a sticky hero, CSS perspective depth, editorial cards, smooth transitions, and a final CTA. Include App Router, next/image, TypeScript, responsive design, prefers-reduced-motion, SEO, accessibility, and organized components. Optimize all imagery and avoid heavy animation. Deliver a complete project ready to customize and deploy.
Landing Pages
Product Scroll 3D
Scroll 3D
Volta Drive — 3D Scroll Automotive Store
Create a Premium Next.js landing page for “Volta Drive”, a automotive brand. Use cinematic 3D scroll, real product imagery, a sticky hero, CSS perspective depth, editorial cards, smooth transitions, and a final CTA. Include App Router, next/image, TypeScript, responsive design, prefers-reduced-motion, SEO, accessibility, and organized components. Optimize all imagery and avoid heavy animation. Deliver a complete project ready to customize and deploy.
Landing Pages
Product Scroll 3D
Scroll 3D
Nox Auto — 3D Scroll Automotive Store
Create a Premium Next.js landing page for “Nox Auto”, a automotive brand. Use cinematic 3D scroll, real product imagery, a sticky hero, CSS perspective depth, editorial cards, smooth transitions, and a final CTA. Include App Router, next/image, TypeScript, responsive design, prefers-reduced-motion, SEO, accessibility, and organized components. Optimize all imagery and avoid heavy animation. Deliver a complete project ready to customize and deploy.
Landing Pages
Product Scroll 3D
Scroll 3D
Velocity — 3D Scroll Automotive Store
Create a Premium Next.js landing page for “Velocity”, a automotive brand. Use cinematic 3D scroll, real product imagery, a sticky hero, CSS perspective depth, editorial cards, smooth transitions, and a final CTA. Include App Router, next/image, TypeScript, responsive design, prefers-reduced-motion, SEO, accessibility, and organized components. Optimize all imagery and avoid heavy animation. Deliver a complete project ready to customize and deploy.
Landing Pages
Product Scroll 3D
Scroll 3D
Aero GT — 3D Scroll Automotive Store
Create a Premium Next.js landing page for “Aero GT”, a automotive brand. Use cinematic 3D scroll, real product imagery, a sticky hero, CSS perspective depth, editorial cards, smooth transitions, and a final CTA. Include App Router, next/image, TypeScript, responsive design, prefers-reduced-motion, SEO, accessibility, and organized components. Optimize all imagery and avoid heavy animation. Deliver a complete project ready to customize and deploy.
Landing Pages
Product Scroll 3D
Scroll 3D
Pitch Objects — 3D Scroll Advertising Mockups Store
Create a Premium Next.js landing page for “Pitch Objects”, a advertising mockups brand. Use cinematic 3D scroll, real product imagery, a sticky hero, CSS perspective depth, editorial cards, smooth transitions, and a final CTA. Include App Router, next/image, TypeScript, responsive design, prefers-reduced-motion, SEO, accessibility, and organized components. Optimize all imagery and avoid heavy animation. Deliver a complete project ready to customize and deploy.
Landing Pages
Product Scroll 3D
Scroll 3D
Brandstage — 3D Scroll Advertising Mockups Store
Create a Premium Next.js landing page for “Brandstage”, a advertising mockups brand. Use cinematic 3D scroll, real product imagery, a sticky hero, CSS perspective depth, editorial cards, smooth transitions, and a final CTA. Include App Router, next/image, TypeScript, responsive design, prefers-reduced-motion, SEO, accessibility, and organized components. Optimize all imagery and avoid heavy animation. Deliver a complete project ready to customize and deploy.
Landing Pages
Product Scroll 3D
Scroll 3D
Mockup Orbit — 3D Scroll Advertising Mockups Store
Create a Premium Next.js landing page for “Mockup Orbit”, a advertising mockups brand. Use cinematic 3D scroll, real product imagery, a sticky hero, CSS perspective depth, editorial cards, smooth transitions, and a final CTA. Include App Router, next/image, TypeScript, responsive design, prefers-reduced-motion, SEO, accessibility, and organized components. Optimize all imagery and avoid heavy animation. Deliver a complete project ready to customize and deploy.
Landing Pages
Product Scroll 3D
Scroll 3D
Canvas Lab — 3D Scroll Advertising Mockups Store
Create a Premium Next.js landing page for “Canvas Lab”, a advertising mockups brand. Use cinematic 3D scroll, real product imagery, a sticky hero, CSS perspective depth, editorial cards, smooth transitions, and a final CTA. Include App Router, next/image, TypeScript, responsive design, prefers-reduced-motion, SEO, accessibility, and organized components. Optimize all imagery and avoid heavy animation. Deliver a complete project ready to customize and deploy.
Landing Pages
Product Scroll 3D
Scroll 3D
Adframe — 3D Scroll Advertising Mockups Store
Create a Premium Next.js landing page for “Adframe”, a advertising mockups brand. Use cinematic 3D scroll, real product imagery, a sticky hero, CSS perspective depth, editorial cards, smooth transitions, and a final CTA. Include App Router, next/image, TypeScript, responsive design, prefers-reduced-motion, SEO, accessibility, and organized components. Optimize all imagery and avoid heavy animation. Deliver a complete project ready to customize and deploy.
Landing Pages
Product Scroll 3D
Scroll 3D
Studio Scene — 3D Scroll Advertising Mockups Store
Create a Premium Next.js landing page for “Studio Scene”, a advertising mockups brand. Use cinematic 3D scroll, real product imagery, a sticky hero, CSS perspective depth, editorial cards, smooth transitions, and a final CTA. Include App Router, next/image, TypeScript, responsive design, prefers-reduced-motion, SEO, accessibility, and organized components. Optimize all imagery and avoid heavy animation. Deliver a complete project ready to customize and deploy.
Landing Pages
Product Scroll 3D
Scroll 3D
Market Hero — 3D Scroll Amazon & Marketplaces Store
Create a Premium Next.js landing page for “Market Hero”, a amazon & marketplaces brand. Use cinematic 3D scroll, real product imagery, a sticky hero, CSS perspective depth, editorial cards, smooth transitions, and a final CTA. Include App Router, next/image, TypeScript, responsive design, prefers-reduced-motion, SEO, accessibility, and organized components. Optimize all imagery and avoid heavy animation. Deliver a complete project ready to customize and deploy.
Landing Pages
Product Scroll 3D
Scroll 3D
Prime Shelf — 3D Scroll Amazon & Marketplaces Store
Create a Premium Next.js landing page for “Prime Shelf”, a amazon & marketplaces brand. Use cinematic 3D scroll, real product imagery, a sticky hero, CSS perspective depth, editorial cards, smooth transitions, and a final CTA. Include App Router, next/image, TypeScript, responsive design, prefers-reduced-motion, SEO, accessibility, and organized components. Optimize all imagery and avoid heavy animation. Deliver a complete project ready to customize and deploy.
Landing Pages
Product Scroll 3D
Scroll 3D
Cartflow — 3D Scroll Amazon & Marketplaces Store
Create a Premium Next.js landing page for “Cartflow”, a amazon & marketplaces brand. Use cinematic 3D scroll, real product imagery, a sticky hero, CSS perspective depth, editorial cards, smooth transitions, and a final CTA. Include App Router, next/image, TypeScript, responsive design, prefers-reduced-motion, SEO, accessibility, and organized components. Optimize all imagery and avoid heavy animation. Deliver a complete project ready to customize and deploy.
Landing Pages
Product Scroll 3D
Scroll 3D
Listing Pro — 3D Scroll Amazon & Marketplaces Store
Create a Premium Next.js landing page for “Listing Pro”, a amazon & marketplaces brand. Use cinematic 3D scroll, real product imagery, a sticky hero, CSS perspective depth, editorial cards, smooth transitions, and a final CTA. Include App Router, next/image, TypeScript, responsive design, prefers-reduced-motion, SEO, accessibility, and organized components. Optimize all imagery and avoid heavy animation. Deliver a complete project ready to customize and deploy.
Landing Pages
Product Scroll 3D
Scroll 3D
Buybox — 3D Scroll Amazon & Marketplaces Store
Create a Premium Next.js landing page for “Buybox”, a amazon & marketplaces brand. Use cinematic 3D scroll, real product imagery, a sticky hero, CSS perspective depth, editorial cards, smooth transitions, and a final CTA. Include App Router, next/image, TypeScript, responsive design, prefers-reduced-motion, SEO, accessibility, and organized components. Optimize all imagery and avoid heavy animation. Deliver a complete project ready to customize and deploy.
Landing Pages
Product Scroll 3D
Scroll 3D
Seller Vista — 3D Scroll Amazon & Marketplaces Store
Create a Premium Next.js landing page for “Seller Vista”, a amazon & marketplaces brand. Use cinematic 3D scroll, real product imagery, a sticky hero, CSS perspective depth, editorial cards, smooth transitions, and a final CTA. Include App Router, next/image, TypeScript, responsive design, prefers-reduced-motion, SEO, accessibility, and organized components. Optimize all imagery and avoid heavy animation. Deliver a complete project ready to customize and deploy.
Landing Pages
joyeria
ecommerce 3d
Lumen Atelier — 3D Joyería de autor
Build a five-page linked website for a joyería de autor business featuring a Three.js hero scene, persistent navigation, services, work, pricing and contact sections, a validated form, scroll reveal animations and a responsive layout with a mobile menu.
Landing Pages
bodega
vino
Bodega Terrada — 3D Bodega y enoturismo
Build a five-page linked website for a bodega y enoturismo business featuring a Three.js hero scene, persistent navigation, services, work, pricing and contact sections, a validated form, scroll reveal animations and a responsive layout with a mobile menu.
Landing Pages
clinica dental
salud
Nova Sonrisa — 3D Clínica dental
Build a five-page linked website for a clínica dental business featuring a Three.js hero scene, persistent navigation, services, work, pricing and contact sections, a validated form, scroll reveal animations and a responsive layout with a mobile menu.
Landing Pages
gimnasio
fitness
Forja Atlética — 3D Centro de entrenamiento
Build a five-page linked website for a centro de entrenamiento business featuring a Three.js hero scene, persistent navigation, services, work, pricing and contact sections, a validated form, scroll reveal animations and a responsive layout with a mobile menu.
Landing Pages
paisajismo
arquitectura
Verdal Estudio — 3D Arquitectura del paisaje
Build a five-page linked website for a arquitectura del paisaje business featuring a Three.js hero scene, persistent navigation, services, work, pricing and contact sections, a validated form, scroll reveal animations and a responsive layout with a mobile menu.
Landing Pages
viajes
turismo
Órbita Lenta — 3D Viajes de larga duración
Build a five-page linked website for a viajes de larga duración business featuring a Three.js hero scene, persistent navigation, services, work, pricing and contact sections, a validated form, scroll reveal animations and a responsive layout with a mobile menu.
Landing Pages
cafe
ecommerce
Raíz Tostadero — 3D Café de especialidad
Build a five-page linked website for a café de especialidad business featuring a Three.js hero scene, persistent navigation, services, work, pricing and contact sections, a validated form, scroll reveal animations and a responsive layout with a mobile menu.
Landing Pages
inmobiliaria
obra nueva
Altura Living — 3D Promoción residencial
Build a five-page linked website for a promoción residencial business featuring a Three.js hero scene, persistent navigation, services, work, pricing and contact sections, a validated form, scroll reveal animations and a responsive layout with a mobile menu.
Landing Pages
escuela de musica
educacion
Cadencia — 3D Escuela de música
Build a five-page linked website for a escuela de música business featuring a Three.js hero scene, persistent navigation, services, work, pricing and contact sections, a validated form, scroll reveal animations and a responsive layout with a mobile menu.
Landing Pages
biotecnologia
laboratorio
Celmira Labs — 3D Biotecnología aplicada
Build a five-page linked website for a biotecnología aplicada business featuring a Three.js hero scene, persistent navigation, services, work, pricing and contact sections, a validated form, scroll reveal animations and a responsive layout with a mobile menu.