Skip to content
Founding Lifetime: every Pro skillfirst 100 members · $169 onceUpgrade
Lookbk
Sign In
Open live demo

The page this skill built from examples/lowtide, working in your browser. Opens in a new tab. Also: Ondine.

12-second example rendered by this skill from examples/lowtide · 1280×720

Example settingswhat each example above was built from

examples/lowtidehero.json
Brand
Lowtide Rooms
Headline
Wake to the sea at your blinds.
Badge
Port Ellery · Open March to October
Colors
background #f5efe4 · ink #1c2230 · accent #b4471f
Mode
light
Fonts
Instrument Serif and Manrope
examples/ondinehero.json
Brand
Ondine Editions
Headline
Two colours, pulled by hand.
Badge
Edition 14 · 60 signed prints
Colors
background #15161c · ink #f2ede3 · accent #f0a640
Mode
dark
Fonts
Bricolage Grotesque and IBM Plex Sans

What you get

  • A self-contained index.html hero and an embed.html to paste into an existing site
  • A seamless loop of two cycles: the blind opens on one art plate, closes, and reopens on a second palette
  • Three code-drawn plates (gradient sun, layered horizon, geometric poster) with grain, in your colours
  • A headline that wipes in line by line through clip-path masks
  • 24 documented effect settings: slat count, direction, wave origin and stagger, cycle, plates, six plate colours, slat colour, frame shape, size, offset, breathing, sheen, grain and glow
  • An SVG still of the open first plate for failures, and one real frame for reduced motion, so the hero is never blank
  • Contrast and layout checks at 390, 768, 1024 and 1440 px, plus a frame-exact MP4 and poster
  • Open-source licenses for every part it builds on

Good fit

  • Hotels, guesthouses and travel brands can frame a sunset or a morning horizon in an arch behind slats that open in a slow wave.
  • Galleries, print studios and interiors brands can show two poster colourways, one after the other, behind a vertical louvre on a light or dark page.
  • Teams announcing a launch can record a 1080p video whose 12-second loop of two 6-second cycles joins without a seam.

Not for

  • Brands with real photography to show: the plates are drawn in code, not photos
  • Busy, fast-cut brands: the reveal is slow and calm by design
  • 3D or WebGL looks such as glass, particles or shaders
  • Full landing pages below the hero (see the Landing Pages series)

About this skill

A hero section that opens like a venetian blind. Beside the copy hangs a framed art plate drawn in code: a gradient sun over horizon bands, layered hills under a low sun, or a bold geometric poster, all with a soft film grain. A blind of 8 to 16 thin slats folds open in a staggered wave, each slat catching a sheen and casting a soft shadow while its strip of the plate slides into register. The headline wipes in line by line behind its own masks. Open, the strips breathe with a slow parallax. Then the blind closes and reopens onto a second plate in a shifted palette, so the scene loops without a seam. Your agent sets your colours, plates, slats, fonts, logo and words, checks contrast at four widths and records a frame-exact 1080p video.

Example request

Build a Shutter Reveal hero for Lowtide Rooms, our guesthouse above the harbour at Port Ellery: a sunset sun behind a horizontal blind in an arch that reopens onto a cool morning horizon, headline 'Wake to the sea at your blinds.', and record the video for our spring opening.

Similar Skills

View all
web
Circuit Trace HeroClaude CodeCodexCursor+3 more agents
web
Confetti Launch HeroClaude CodeCodexCursor+3 more agents

Details

Output
Animated canvas hero · page + embed · 1080p loop
Needs
Node.js 18+, Chrome (or Chromium/Edge), and ffmpeg for the video
Series
Motion Heroes · 71 skills
Updated
Nov 1, 2026
Checked
Nov 1, 2026: its own commands ran and passed. That is a working check, not a security audit.

Generates with

Plain 2D canvas and CSS clip-path (no libraries)Motion Heroes kitHeadless Chrome checks and frame-stepped recorderffmpeg
Good forProduct launchBrandWeb design

Installed it? Tell others how it went. Reviews come from people who installed this skill.

Write a review

FAQ

Does it work on a dark background?

Yes. Light and dark pages both work, and the slat shadows switch to black on a dark page. The words always sit on the plain page colour, and the build checks their contrast at four widths.

How long is the loop?

Each plate shows for the cycle setting, 4 to 10 seconds (default 6), and the loop is two cycles, one per plate. Record twice the cycle, 12 seconds with the default, and the video joins without a seam.

Can I use my own photo as the plate?

No. The three plates (sun, horizon, poster) are drawn in code from your six colours, so they stay crisp at any size and need no image files. Pick the style and the two palettes in hero.json.

Which agents is Shutter Reveal Hero written for?

Any agent that reads SKILL.md folders, including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI and OpenCode.

Do I own what I make with it?

Yes. Everything your agent makes with this skill is yours, including for client and commercial work.

What if it doesn’t work for me?

Email support@lookbk.dev within 7 days of buying and we’ll fix it or refund you.

Credits and licensesWritten by Lookbk

Lookbk wrote this package: the shutter reveal effect, its canvas drawing and line-wipe CSS, the Motion Heroes kit and the examples. No third-party code or libraries are included. Written by Lookbk, no third-party code.

Credits and licenses for the open-source software and fonts it uses are in NOTICE.md inside the download.