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

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

What you get

  • A self-contained index.html hero and an embed.html to paste into an existing site
  • Your silk, shot and sheen colors, fonts, logo, headline and buttons
  • 17 documented effect settings: seed, loop length, ribbons, threads, three colors, sheen, wave, twist, width, size, tilt, pointer turn, opacity, glow, grain
  • Dark or light pages, left, right or centered layouts, with the ribbons above the copy on phones
  • An SVG still picture for no WebGL or reduced motion, 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

  • Fashion labels, textile ateliers, bridal studios and jewelry brands can show fine silk ribbons rolling and twisting beside their headline.
  • Private banks, wealth managers and premium fintechs that want a quiet, elegant hero can lay the threads like ink on a light page or glow on a dark one.
  • Brands with two signature colors can pair them as shot silk, one hue seen face-on and the other where the ribbon folds away.

Not for

  • Showing a real fabric or product photo: the silk is drawn from lines
  • Loud, playful or chunky brands: the look is fine and quiet by design
  • Full landing pages below the hero (see the Landing Pages series)

About this skill

Ribbons of silk flowing beside your headline. Each ribbon is a bundle of fine threads that rolls in slow waves through depth, twists, curls and tapers away at both ends, shaded like shot silk: one hue face-on, another where it folds away, with a sheen sliding along the folds. The bundle turns toward the pointer in 3D, glowing like light on dark pages and laid like ink on light ones, and fades behind the copy. Your agent sets the two silk colors, the sheen, fonts, logo, headline and buttons, checks contrast at four widths and records a seamless 1080p loop.

Example request

Build a Silk Ribbon hero for Ondine Atelier, a silk scarf label: ivory page, rose and plum shot silk, headline 'Silk that moves like water.', and record a 12-second loop.

Similar Skills

View all
web
Isometric City HeroClaude CodeCodexCursor+3 more agents
web
Lava Lamp HeroClaude CodeCodexCursor+3 more agents

Details

Output
Animated WebGL 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

Raw WebGL1 (hand-written vertex and fragment shaders, no libraries)Thread bundles built and shaded in the vertex shader (shot silk, anisotropic sheen)Motion Heroes kitHeadless Chrome checks and frame-stepped recorderffmpeg
Good forProduct launchBrandSocial mediaWeb design

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

Write a review

FAQ

How many ribbons and threads can I have?

From 1 to 4 ribbons (default 3) and 30 to 160 threads across each (default 90). Few threads give an open, drawn look and many a dense, woven one. Every other ribbon swaps the two silk colors. The build notes when the total passes 400 threads: fine on a laptop, heavier on old phones.

Will the ribbons cover my headline?

They float in the space beside the copy, and the threads fade behind the words. If they still crowd the headline, lower size (0.6 to 1.4, default 1) or raise the scrim. On phones the ribbons sit above the copy, then come the words and the main button.

What happens with reduced motion or without WebGL?

Visitors who ask for reduced motion get one still frame of the live hero at 3.2 seconds. Without WebGL, or if the script is blocked, they see an SVG still drawn from a few threads of each ribbon, so the hero is never blank.

Which agents is Silk Ribbon 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 silk thread shaders, 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.