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/haldis, working in your browser. Opens in a new tab. Also: Nettlebank.

16-second example rendered by this skill from examples/haldis · 1280×720

Example settingswhat each example above was built from

examples/haldishero.json
Brand
Haldis
Headline
Bank the afternoon.
Colors
background #efe6d4 · ink #1c1813 · accent #a8401f
Mode
light
Fonts
Fraunces and DM Sans
examples/nettlebankhero.json
Brand
Nettlebank Energy Co-op
Headline
Sunlight, shared.
Colors
background #dfe3dc · ink #121614 · accent #2f6f5e
Mode
light
Fonts
Space Grotesk and IBM Plex Sans

What you get

  • A self-contained index.html hero page in your colours, fonts and copy
  • An embed.html section to paste into an existing site
  • A card model street with contour terrain, framed windows and lit rooms, under a paper sky
  • The headline cut through the paper: dark cuts by day, lit from behind at night
  • A real switch that runs the day to night swing, with the page's colours following the light at 7:1 or better
  • Checks at 390, 768, 1024 and 1440 px for text size, contrast, clearance under the bar and the old template
  • A frame-exact 16-second 1080p MP4 that loops, and a poster
  • Open-source licenses for every part it builds on

Good fit

  • Solar and home battery brands can show light going into the roof by day and out of the windows at night.
  • Lighting, housing and architecture studios get a first screen that is a lit model rather than a stock photo.
  • A launch team that needs the live hero and a looping clip for social posts gets both from one hero.json.

Not for

  • Long headlines: one line that fits a 768 px screen
  • Pages that need a product photo in the first screen
  • Visitors without WebGL see a flat still and the plain headline
  • Brands whose page colours must never change

About this skill

A centred-lockup hero built as a card model of a street on a studio table, with the sky a sheet of heavy paper and the headline cut clean through it. By day a lamp on a brass rail lights the paper from the front, so the letters read as dark cuts with the board's thickness lit on their floors. A real switch on the table sends the sun down the rail; when it sets, a second circuit lights the sheet from behind, the cut letters and pinhole stars glow, the moon rises and the windows light house by house, each with a room behind it. The page's bar, caption and text change with the light and stay at 7:1 or better. It loops day, dusk, night and dawn every 16 seconds.

Example request

Use the day-night-hero skill to build a hero for our home battery: a card model street under a paper sky with our headline cut through it, a switch that turns day to night, our lede and one call to action, plus a 16-second 1080p loop.

Similar Skills

View all
New
web
Dither LaserClaude CodeCodexCursor+3 more agents
New
web
Pixel Grid RevealClaude CodeCodexCursor+3 more agents

Details

Output
three.js paper sky and card model lockup hero with a day and night switch · page + embed · 1080p loop
Needs
Node.js 18+, Chrome (or Chromium/Edge), and ffmpeg for the video
Series
Motion Heroes · 77 skills
Updated
Nov 2, 2026
Checked
Nov 2, 2026: its own commands ran and passed. That is a working check, not a security audit.

Generates with

three.js r180 with RoundedBoxGeometry and RoomEnvironment, pinned with SRIA paper shader that cuts the headline from the page's own layoutMotion Heroes kit v2 (lockup composition)Headless Chrome checks and frame-stepped recorder, ffmpeg
Good forBrandProduct launchWeb design

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

Write a review

FAQ

Is the headline still real text?

Yes. The page keeps the real headline for readers, search and screen readers; the letters you see are cut into the paper from its exact layout. Before the scene starts, and without WebGL, the plain headline shows.

Does the page itself change colour at night?

Yes. The bar, the caption and the text take the paper's colours as the light changes, and the build checks that the ink stays at 7:1 or better on every step toward dusk, dawn and night.

What happens without a click, and in the video?

The loop flips the switch itself at 3.4 seconds and back later, running day, dusk, night and dawn every 16 seconds, so a 16-second video loops without a seam. Under reduced motion the switch swaps a still.

Which agents is Day Night 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 and its Motion Heroes kit v2; it loads three.js r180 (MIT licence) from jsDelivr with integrity hashes, and fonts from Fontsource under the SIL Open Font License 1.1. 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.