Animated Website Prompt For Claude

Build one complete, self-contained index.html for Luma Bureau, a fictional independent creative studio. Return only HTML. Inline all CSS and JavaScript. Use no external assets, dependencies, server, API keys or build tools; opening the file in a browser must be sufficient. Design a bold editorial site using butter yellow #f6ed83, ink #171717 and off-white #faf8ef. Use a heavy system sans-serif headline style and a monospace treatment for small captions. Add an animated field of soft geometric shapes using CSS gradients and transforms. Keep it behind the content, restrained enough for excellent contrast. Include a header with working section navigation and a mobile menu; a hero with “Make the ordinary impossible to ignore.” and “Strategy, identity and digital experiences for curious businesses.”; three project cards; three expandable services; a studio section; an FAQ; and a footer. The hero headline should enter in staggered word groups while remaining a single coherent accessible heading. Reveal sections once with IntersectionObserver. Give cards a subtle hover lift and a matching keyboard focus treatment. Project content: Solace, a fictional refillable skincare concept, with sculptural peach circles; Loop Radio, a fictional independent music platform, with concentric violet rings; and Forma, a fictional furniture workshop, with a simple geometric chair. Generate all artwork with CSS or inline SVG. Each project opens a native dialog containing its challenge, approach and three concrete deliverables. Write complete, believable concept-case-study copy and clearly label the projects as fictional. Services are Brand Foundations, Digital Experiences and Launch Systems. Each expands to show scope and an indicative timeline of 2, 4 and 3 weeks respectively. FAQs answer project length, remote collaboration and handoff formats using native details elements. “Start a project” opens a brief dialog with name, email, a service selector and a short project summary. Validate locally. On submission, render a readable summary and offer “Copy brief”. State “Demo only. Nothing was sent.” Never imply an email was delivered. Provide a selectable-text fallback if clipboard access fails. Make every control work with keyboard and touch. Support Escape and focus restoration for dialogs. Disable decorative movement and show content immediately for prefers-reduced-motion. Ensure responsive layouts, visible focus and no horizontal overflow.