PromptBase
Upgrade
Close icon
General
Home
Marketplace
Create
Hire
Login
Chat
Sell
Explore

Prompt Details

Model
(claude-5-fable)
Token size
331
Example input
[Brand]: NOCTIS [Industry]: Premium audio hardware [Vibe]: Luxury / dark minimal [Color]: #c8a75b
Example output
The showcase is built, verified in a real browser, and ready to run from Test-prompt/. Everything is in place; nothing is pending. What I built. A complete Angular 22 project with SSR and prerendering, zoneless with signals throughout, GSAP 3.15 with ScrollTrigger and SplitText, Lenis smooth scroll driven from the GSAP ticker, and Tailwind 4 configured CSS-first. The brief's placeholders were unfilled, so I chose a fictional brand and made every placeholder a single-edit swap: Brand and copy live in brand.config.ts. Assumed values: NOCTIS, premium audio hardware, key features "Adaptive Noise Cancelling" and "Sixty-hour battery", bento placement classes per tile. Palette, fonts and motion tokens live in the @theme block of styles.css. Assumed luxury dark mood, primary gold on near-black. There is no tailwind.config.js in v4; .postcssrc.json wires the plugin. Sections. hero.ts does kinetic text in three layers: masked characters rise in on load, the character masks scatter and dissolve on a scrubbed scroll timeline, and a marquee band whose speed, direction and skew follow Lenis velocity. specs.ts renders a 12-column bento grid. Each spec-tile.ts owns its count-up and an SVG visual, a noise-to-clean wave for the first feature and a scrubbed ring for the second. Hovering one tile dims the others through a signal. smooth-scroll.ts exposes coarse state as signals and per-frame data through a listener, so nothing frame-rate ever touches change detection. All browser work sits in afterNextRender, so the server path never sees GSAP or Lenis. Verification. Production build passes and prerenders the route. Unit tests pass. A scripted Chrome session confirmed the hydrated page: Lenis wheel scrolling, SplitText output, all counters ending at their exact values, direct hash-load reveal, reduced-motion fallback, no horizontal overflow at 390px, and zero console errors. One real bug surfaced and is fixed: GSAP 3.13+ writes translate: none inline on animated elements, which silently disabled the Tailwind class hiding the header. The header hide is now a GSAP tween driven by a signal effect, and the rule is documented in the README.md.
Claude

Awards Website Generator

Add to Cart
Instant accessInstant access
Usage rightsCommercial use
Money-back guaranteeMoney‑back
By purchasing this prompt, you agree to our terms of service
CLAUDE-5-FABLE
Tested icon
Guide icon
4 examples icon
Free credits icon
🔴 LIVE DEMO: https://rubra-demo.netlify.app/ Generate premium, Awards-inspired websites from a simple brief. This Master Prompt turns Claude into a creative frontend developer, generating production-ready Angular standalone components with GSAP animations, Lenis smooth scrolling and Tailwind CSS. Provide your brand, colors, mood and content to get high-end, editorial UI code. Built to avoid common SSR/hydration issues and animation memory leaks. Perfect for agencies and freelancers.
...more
Updated 2 weeks ago
Report
Browse Marketplace