Skip to content
Recaply.
Sign inSubmit a tool

DirectorySkills

Drifting shapes hero: 1440, made in this run
Run 1Drifting shapes hero“Make a fun hero with floating colourful shapes for our children's music lessons. Copy in brief.md.”
Runs in
  • Claude Code
  • Codex
  • Cursor
  • Gemini CLI
  • GitHub Copilot
  • OpenCode
Generates with
Your agent's model
Tested with
Claude Code 2.1.322Claude Sonnet 5.51 real run, 10 Nov
Needs
Node 20+Chrome
Licence
Recaply licence

Drifting Shapes Hero

A cheerful centred hero with bold flat shapes (circles, squiggles, stars) drifting slowly around the edges.

$9.99once, yours to keep

Every premium skill and prompt, one plan$19.99 a month. Cancel any time. What you get when you buy

Payments are non-refundable. See our Terms of service.

Builds a playful hero with drifting flat shapes into your own project: butter-yellow hero; eight bold flat shapes (a coral circle, a teal squiggle, a blue triangle, an orange star, a lilac half circle, a green plus, a pink ring, a navy dot) drift and turn slowly around the edges; centred chunky headline, line and two buttons. Plain HTML, CSS and JavaScript, or matched to React, Next.js, Vue, Svelte, Astro or Tailwind when the project uses them. Comes with a working reference and a check that screenshots it at phone, tablet and desktop widths and flags sideways overflow, text under 12px, missing alt text and names, low contrast, no focus styles, motion that ignores reduced motion, leftover sample words and emoji icons. Use when a kids, education, community, games or friendly consumer brand wants a joyful hero, or someone asks for floating shapes, playful geometry or a fun animated background.

By RecaplyUpdated 12 Nov

Install Drifting Shapes Hero

After the download, ask your agent to add it, or run the line yourself.

Read https://recaply.co/skills/drifting-shapes-hero/install.md and follow it to install the drifting-shapes-hero skill from drifting-shapes-hero.zip.

Paste it into your agent. It reads our install steps, finds the ZIP you downloaded and adds the skill for you.

New to skills? How to install a skill

Similar skills

All 735 skills

Who Drifting Shapes Hero is for

What you get

  • One HTML file with its CSS inside: no build step, no framework
  • A playful hero with drifting flat shapes
  • Checked at phone and desktop widths

Good fit

  • When a kids, education, community, games or friendly consumer brand wants a joyful hero

Not for

  • An app with a backend, sign-in or a database
  • Copying another company's site

About this skill

You say

Make a fun hero with floating colourful shapes for our children's music lessons. Copy in brief.md.

It said back

The hero is built and passes the check at phone, tablet and desktop widths. I looked at the 390px and 1440px screenshots and they read cleanly, with nothing cut off or overlapping. I didn't open the 768px one.

It has a sunshine-yellow background with deep navy type and a sky-blue circle among the floating shapes. Eight flat shapes drift slowly around the edges, and on phones four of them sit in a band under the buttons. There is a "Pause motion" button, and with reduced motion on the shapes stay still.

Show more

What it did in run 1

  1. drifting-shapes-hero
  2. **/*
  3. ./brief.md
  4. ./.claude/skills/drifting-shapes-hero/reference/index.html
  5. ./.claude/skills/drifting-shapes-hero/reference/style.css
  6. ./.claude/skills/drifting-shapes-hero/reference/script.js
  7. R=.claude/skills/drifting-shapes-hero/reference && cp $R/style.css style.css && cp $R/script.js script.js && python3 - <<'E' import re s=open('style.css').read() s=s.replace("--bg:#FFF4CF","--bg:#FFE680").replace("--ink:#2B1B4A","--ink:#14284B").replace("--muted:#54476B","--muted:#33415F").replace("--line:#EAD9A0","--line:#D9BE4A").replace("--accent:#2B1B4A","--accent:#14284B").replace("--on-accent:#FFF4CF","--on-accent:#FFF6CC").replace("--em:#B33A1E","--em:#9A2F14").replace("--blue:#3B82F6","--blue:#38A9F0") open('style.css','w').write(s) j=open('script.js').read() i=j.index('// Shared hero helpers') j="document.documentElement.classList.add('js');\nconst reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)');\n"+j[i:j.index('function motionLoop')] open('script.js','w').write(j) E cat > index.html <<'E' <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Little Notes music school | First music lessons that feel like play</title> <meta name="description" content="Group music classes for ages 3 to 7 in piano, drums and singing."> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&family=Nunito:wght@400;600;700&display=swap"> <link rel="stylesheet" href="style.css"> </head> <body> <a class="skip" href="#main">Skip to content</a> <div class="hero ds"><header class="hbar wrap"><a class="brand" href="#main"><svg viewBox="0 0 32 32" aria-hidden="true" focusable="false"><ellipse cx="10" cy="25" rx="6" ry="4.5" fill="#14284B"/><path d="M14.5 24V5l13 3v6l-9-2v12z" fill="#14284B"/></svg>Little Notes</a><nav aria-label="Main"><ul><li><a href="#main">Piano</a></li><li><a href="#main">Drums</a></li><li><a href="#main">Singing</a></li></ul></nav><a class="btn btn-primary" href="#main">Book a taster</a></header><main id="main"><div class="ds-shapes" aria-hidden="true"><span class="sh sh-circle s0" style="--c:var(--blue);left:6%;top:14%;--dur:14s;--del:-0s"></span><span class="sh sh-squig s1" style="--c:var(--teal);left:82%;top:12%;--dur:17s;--del:-2s"></span><span class="sh sh-tri s2" style="--c:var(--coral);left:10%;top:70%;--dur:20s;--del:-4s"></span><span class="sh sh-star s3" style="--c:var(--orange);left:86%;top:64%;--dur:14s;--del:-6s"></span><span class="sh sh-half s4" style="--c:#C4B5FD;left:24%;top:86%;--dur:17s;--del:-8s"></span><span class="sh sh-plus s5" style="--c:#22C55E;left:70%;top:88%;--dur:20s;--del:-10s"></span><span class="sh sh-ring s6" style="--c:#F472B6;left:4%;top:40%;--dur:14s;--del:-12s"></span><span class="sh sh-dot s7" style="--c:#14284B;left:92%;top:38%;--dur:17s;--del:-14s"></span></div><div class="wrap ds-in"><p class="ds-tag">For ages 3 to 7</p><h1>First music lessons that feel like play</h1><p class="h-lede">Group classes for ages 3 to 7 in piano, drums and singing.</p><div class="h-acts"><a class="btn btn-primary" href="#main">Book a taster class</a><a class="btn btn-ghost" href="#main">Class times</a></div></div></main><button class="hpause" type="button" data-hero-pause>Pause motion</button></div> <script src="script.js" defer></script> </body> </html> E node .claude/skills/drifting-shapes-hero/scripts/check.mjs index.html --out check 2>&1 | tail -30
  8. cp .claude/skills/drifting-shapes-hero/reference/style.css style.css && cp .claude/skills/drifting-shapes-hero/reference/script.js script.js && sed -i '' -e 's/--bg:#FFF4CF/--bg:#FFE680/' -e 's/--ink:#2B1B4A/--ink:#14284B/' -e 's/--muted:#54476B/--muted:#33415F/' -e 's/--line:#EAD9A0/--line:#D9BE4A/' -e 's/--accent:#2B1B4A/--accent:#14284B/' -e 's/--on-accent:#FFF4CF/--on-accent:#FFF6CC/' -e 's/--em:#B33A1E/--em:#9A2F14/' -e 's/--blue:#3B82F6/--blue:#38A9F0/' style.css && head -c 300 style.css
  9. ./script.js
  10. ./index.html
  11. ./style.css
  12. node .claude/skills/drifting-shapes-hero/scripts/check.mjs index.html --out check 2>&1 | tail -30
  13. reduced-motion|reduce
  14. node .claude/skills/drifting-shapes-hero/scripts/check.mjs .claude/skills/drifting-shapes-hero/reference/index.html --out /tmp/refcheck 2>&1 | tail -5
  15. ./script.js
  16. ./script.js
  17. node .claude/skills/drifting-shapes-hero/scripts/check.mjs index.html --out check 2>&1 | tail -5
  18. ./check/1440.png
  19. ./check/390.png
  20. Done

10 Nov 2026 · Claude Code 2.1.322 with Claude Sonnet 5.5 · 1 min 42 s · $0.25 of API use

Questions

Is Drifting Shapes Hero free?

No. Drifting Shapes Hero costs $9.99 once and stays in your Recaply account, or it comes with the Recaply plan ($19.99 a month), which opens every premium skill and prompt.

Which agents can use Drifting Shapes Hero?

Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot and OpenCode.

What do I get when I buy Drifting Shapes Hero?

A ZIP of the whole skill folder (32 KB): the SKILL.md your agent follows and its 6 other files, the references, templates and scripts it uses. You download it from this page whenever you need it, and install it in Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot and OpenCode. The Recaply plan opens it too, with every other premium skill and prompt.

How do I install Drifting Shapes Hero?

Buy it, then download the ZIP from this page. For Claude Code, unzip it into .claude/skills/ in your project. For Codex, Cursor and Gemini CLI, unzip it and run npx skills add ./drifting-shapes-hero with your agent's flag.

What do I get from Drifting Shapes Hero?

One HTML file with its CSS inside: no build step, no framework. A playful hero with drifting flat shapes. Checked at phone and desktop widths.

What does Drifting Shapes Hero need?

Node 20+ and Chrome, and no API key. Each use costs nothing beyond your agent.

How big is Drifting Shapes Hero?

7 files, about 20,379 tokens in all. The SKILL.md is about 2,188 tokens, and your agent reads it only when the job fits.

What does a run cost?

Our 1 runs took 1 min 42 s to 1 min 42 s and $0.25 to $0.25 of API use each, in Claude Code with claude-sonnet-5-5. On a Claude plan, a run counts toward your usage instead.

Do I have to name Drifting Shapes Hero to use it?

Type /drifting-shapes-hero first to make sure it loads. Without it, Claude Code may judge a small job simple enough to do without the skill.