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

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

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

What you get

  • A self-contained index.html hero and an embed.html to paste into an existing site
  • Your backbone and base colours, data labels, locus and sequence, with your fonts, logo, headline and buttons
  • 22 documented effect settings: seed, loop length, turns, direction, sequence, colours, radius, tilt, lean, length, focus, glow, read, labels, ruler, locus and motes
  • Dark lab screens or light pages, left, right or centered layouts, with the helix lying across the picture above the copy on phones
  • An SVG still picture for reduced motion or a failed canvas, so the hero is never blank
  • Contrast and layout checks at 390, 768, 1024 and 1440 px
  • A frame-perfect MP4 that loops seamlessly (1080p by default, portrait sizes too) and a poster
  • Open-source licenses for every part it builds on

Good fit

  • Genomics, sequencing and biotech companies can show a lit helix on a dark lab screen, with labels in the units their product really reports.
  • Ancestry kits and consumer health pages can use a warm light page, where the beads read as glossy model atoms instead of glowing.
  • Science education sites and pharma launches get a seamless loop of 8 to 16 seconds to record as a 1080p video for social posts.

Not for

  • Showing a visitor's real genetic data: the sequence and labels are illustrative
  • Brands outside science and health, where a helix reads as a cliché
  • Full landing pages below the hero (see the Landing Pages series)

About this skill

A DNA double helix beside your headline, turning in real depth. Two backbones of glowing beads wind round each other, joined by rungs in the colours of their bases. The near end is soft and out of focus and the far end small and dim. A sequencing read slides along the helix inside a dotted ring and prints the bases it passes, data labels on leader lines take turns, and a ruler of base positions runs alongside. Your agent sets the colours, labels, locus and copy, checks contrast at four widths and records a seamless 1080p loop.

Example request

Build a DNA Helix hero for Halden Genomics, whole-genome sequencing for hospitals: near-black navy, teal and periwinkle backbones, labels for read depth, a variant call and GC content, headline 'Read it all. In five days.', and record a 12-second loop.

Similar Skills

View all
web
Constellation Map HeroClaude CodeCodexCursor+3 more agents
web
Origami Fold HeroClaude CodeCodexCursor+3 more agents

Details

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

Generates with

Plain 2D canvas, no librariesPerspective projection, depth sorting and depth of fieldMotion Heroes kitHeadless Chrome checks and frame-stepped recorderffmpeg
Good forProduct launchBrandResearch communicationEducation

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

Write a review

FAQ

Is the DNA sequence on screen real?

Only if you give one. You can set up to 120 bases, using the letters A, C, G and T, repeated along the helix; otherwise the seed makes one up. The labels, locus and ruler show what you write. The helix is an illustration, not a visitor’s data, so keep labels clear of medical claims.

How long can the data labels be, and how many show?

Up to 4 labels, each with a title of up to 22 characters and a detail line of up to 28. They show two at a time and take turns. On phones the helix lies across the picture above the copy, and labels appear only when the read is off, one at a time.

Does it need WebGL or an animation library?

No. The helix is drawn on a plain 2D canvas by code inlined in the page, with perspective, depth sorting and depth of field. Only the fonts load, from jsDelivr or Google Fonts. With reduced motion visitors get one still frame at 4.6 seconds, and if the canvas fails they see an SVG still.

Which agents is DNA Helix 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 Motion Heroes kit, the helix effect, the still picture and the examples. No third-party code is 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.