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

Awwwards Angular Site 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 Awwwards-winning, interactive websites in seconds. This Master Prompt forces Claude to build premium, production-ready Angular standalone components featuring GSAP animations, Lenis smooth scrolling, and Tailwind CSS. Avoid SSR hydration bugs and memory leaks. Just fill in your brand variables (colors, mood, content) and get high-end, editorial UI code instantly. Perfect for agencies.
...more
Updated 22 hours ago
Report
Browse Marketplace