Cursor flashlight reveal hero (WebGL + CSS mask)
A pitch-black studio page where your cursor is a flashlight: it reveals a vivid paper-cut artwork, a coloured headline and project tiles hidden underneath.
Live — built from this exact promptOpen live demo
prompt.md
Course onlyBuild a single, self-contained index.html: a near-black landing hero for a [STUDIO TYPE, e.g. brand studio] where the cursor is a flashlight that reveals a vivid hidden artwork. Brand: [STUDIO NAME] — [WHAT YOU DO IN ONE SENTENCE] Headline: [LINE 1, bold grotesk] / [LINE 2, italic serif] Palette: [e.g. peach #ffcfa8 on #050507; hidden inks indigo, violet, magenta, tangerine, sun yellow, mint] Technical rules
The full prompt comes with the course
All 55 prompts in the library are part of the Vibewrights course. Enrollment opens in January 2027 — join the waitlist to get the founding-member price.
See what's includedWhat you'll get
- ✓A flashlight made of one CSS radial mask shared by every layer
- ✓A paper-cut generative artwork with light-cast shadows in one shader
- ✓Eased light, magnetic buttons, film grain and a custom cursor ring
- ✓WebGL that only shades the pixels the light can reach
How to use it
- 1Replace everything in [BRACKETS] with your own product, copy and colors.
- 2Paste it into Claude Code, Cursor, Lovable or Bolt and open the page in Chrome.
- 3Compare with the live demo, then tune one thing at a time.
— From the course
You'll build this end-to-end in Module 2, with a step-by-step video walkthrough and AI feedback on your project.
