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

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

What you get

  • A self-contained index.html hero and an embed.html to paste into an existing site
  • A seamless loop: flat sheet, folding, a crane that flaps and turns, unfolding
  • Two-sided paper in your colors, with grain, soft shading and a shadow on a crease-diagram table
  • 15 documented effect settings: seed, paper, back, diagram color, cycle, flap, turn, lift, size, shadow, grain, diagram, angle, tilt and scraps
  • Light or dark tables, left, right or centered layouts, with the crane above the copy on phones
  • An SVG still of the folded crane for reduced motion and failures, so the hero is never blank
  • Contrast and layout checks at 390, 768, 1024 and 1440 px, and a frame-exact MP4 and poster
  • Open-source licenses for every part it builds on

Good fit

  • Maths teachers, craft schools and stationery or paper shops can show a sheet folding into a crane and back beside their headline.
  • Brands that want a 3D look without WebGL get a low-poly crane drawn on a plain 2D canvas with no libraries to load.
  • Teams launching a course or product can record a seamless 12-second 1080p loop of the fold for a launch post and a poster.

Not for

  • Folding a model other than the crane: the sheet and crane model are built in
  • Real step-by-step folding instructions: the pieces travel as rigid triangles, not along true folds
  • Full landing pages below the hero (see the Landing Pages series)

About this skill

A hero section where a square of two-sided paper folds itself into a crane. The sheet lies on a table printed with a crease diagram; its 24 creased triangles lift one after another, turn over so the paper's white back flashes past, and settle into a low-poly crane that beats its wings and turns in soft light above its shadow, then fold back down into the flat sheet. Paper grain travels with the paper. Your agent sets your paper colors, fonts, logo and words, checks contrast at four widths and records a seamless 12-second 1080p loop.

Example request

Build an Origami Fold hero for Kamiko's geometry-by-folding lessons: vermilion paper on a warm table, headline 'Geometry you can fold.', and record the 12-second loop.

Similar Skills

View all
web
Constellation Map HeroClaude CodeCodexCursor+3 more agents
web
DNA Helix HeroClaude CodeCodexCursor+3 more agents

Details

Output
Animated hero section · 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

2D canvas with a hand-written 3D projection (no libraries)Slerped rigid pieces between a sheet and a crane modelMotion Heroes kitHeadless Chrome checks and frame-stepped recorderffmpeg
Good forProduct launchBrandEducation

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

Write a review

FAQ

Can it fold something other than a crane?

No. The flat sheet and the crane model are built in, so every hero folds the same crane. You change how it folds instead: the seed (1 to 9999) sets which triangle becomes which facet and the folding order, and lift, flap, turn, angle and size shape the motion.

Can I use it to teach real folding steps?

Not as instructions. The 24 triangles travel as rigid pieces between the flat sheet and the crane, not along true folds, so the motion shows the idea of folding rather than real steps. For a tutorial you would still need your own diagrams or video.

What do visitors with reduced motion or a phone see?

With reduced motion they get one still frame of the real crane at 7.3 seconds, and if the script is blocked they see an SVG still of the folded crane, so the hero is never blank. On phones the crane comes first, then the words, and the navigation pill is hidden.

Which agents is Origami Fold 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 folding effect, the crane and sheet model, the projection and shading, the Motion Heroes kit 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.