Skip to content
Recaply.
Sign inSubmit a tool

DirectorySkills

Orbit portrait quotes: 1440, made in this run
Run 1Orbit portrait quotes“Make a fun testimonials section with faces circling around for our language exchange app. Quotes in brief.md, profile photos in photos/.”
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, 12 Nov
Needs
Node 20+Chrome
Licence
Recaply licence

Orbit Portrait Quotes

Portraits circle slowly around a central quote; choosing a portrait brings their quote to the centre.

$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 testimonial section with portraits orbiting a central quote into your own project: six round portraits on a slowly turning ring around a central disc that holds the chosen quote, name and role; picking a portrait shows its quote; the ring stops on hover, on focus, with a pause button and with reduced motion; on phones the ring becomes a row. 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 community, marketplace, event or app wants a playful, eye-catching testimonial section, or someone asks for orbiting avatars or a circle of faces.

By RecaplyUpdated 12 Nov

Install Orbit Portrait Quotes

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

Read https://recaply.co/skills/orbit-portrait-quotes/install.md and follow it to install the orbit-portrait-quotes skill from orbit-portrait-quotes.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 Orbit Portrait Quotes is for

What you get

  • One HTML file with its CSS inside: no build step, no framework
  • A testimonial section with portraits orbiting a central quote
  • Checked at phone and desktop widths

Good fit

  • When a community, marketplace, event or app wants a playful, eye-catching testimonial section

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 testimonials section with faces circling around for our language exchange app. Quotes in brief.md, profile photos in photos/.

It said back

The testimonials section is built in testimonials/. Open testimonials/index.html to see it. The automated check passes at 390, 768 and 1440px. The only note is that there's no Open Graph share image. I looked at the 390 and 1440 screenshots and they look right. I didn't open the 768 screenshot, and I haven't tried it in a live browser (so I haven't clicked a portrait or watched the ring turn).

What it does

  • Six learner photos sit on a slowly turning dotted ring around a white disc, and each face stays upright as the ring turns.
  • Clicking a portrait puts that person's quote, name, country and language in the disc, with a short fade.
  • The ring stops on hover, on keyboard focus and when you press the Pause button.
  • With reduced motion on, the ring stays still.
  • On phones (under 700px) the ring becomes a 3×2 grid of faces above the quote card.
Show more

What it did in run 1

  1. orbit-portrait-quotes
  2. cd .; ls -la . photos; cat brief.md; ls .claude/skills/orbit-portrait-quotes/reference; node .claude/skills/orbit-portrait-quotes/scripts/check.mjs --ready
  3. cd ./.claude/skills/orbit-portrait-quotes/reference; cat index.html style.css script.js; sips -g pixelWidth -g pixelHeight ../../../../photos/*.jpg | grep -c pixel
  4. ./.claude/skills/orbit-portrait-quotes/reference/index.html
  5. ./.claude/skills/orbit-portrait-quotes/reference/style.css
  6. ./.claude/skills/orbit-portrait-quotes/reference/script.js
  7. cd .; mkdir -p testimonials/img; for f in photos/*.jpg; do sips -s format jpeg -s formatOptions 80 --resampleHeightWidthMax 240 "$f" --out testimonials/img/$(basename $f) >/dev/null; done; sips -g pixelWidth -g pixelHeight photos/*.jpg | grep pixel | head -4; ls -la testimonials/img
  8. mkdir -p testimonials/img && cd photos && for n in beatriz kenji ulrike wanjiru julien sofia; do sips -s format jpeg -s formatOptions 80 --resampleHeightWidthMax 240 $n.jpg --out ../testimonials/img/$n.jpg >/dev/null; done; sips -g pixelWidth -g pixelHeight beatriz.jpg; ls -la ../testimonials/img
  9. mkdir -p testimonials/img && cd photos && sips -s format jpeg -s formatOptions 80 --resampleHeightWidthMax 240 beatriz.jpg kenji.jpg ulrike.jpg wanjiru.jpg julien.jpg sofia.jpg --out ../testimonials/img/ && ls -la ../testimonials/img
  10. mkdir -p testimonials/img
  11. sips -s format jpeg -s formatOptions 80 --resampleHeightWidthMax 240 photos/beatriz.jpg photos/kenji.jpg photos/ulrike.jpg photos/wanjiru.jpg photos/julien.jpg photos/sofia.jpg --out testimonials/img/
  12. ./testimonials/index.html
  13. cat .claude/skills/orbit-portrait-quotes/reference/style.css > /dev/null; echo ok
  14. ./testimonials/style.css
  15. ./testimonials/script.js
  16. node .claude/skills/orbit-portrait-quotes/scripts/check.mjs testimonials/index.html --out check
  17. sed -i '' 's/prefers-reduced-motion:reduce/prefers-reduced-motion: reduce/' testimonials/style.css && sed -i '' 's/Choose a face to read what they said\./Tap a portrait to hear from a real learner./' testimonials/index.html && node .claude/skills/orbit-portrait-quotes/scripts/check.mjs testimonials/index.html --out check
  18. ./testimonials/style.css
  19. ./testimonials/index.html
  20. node .claude/skills/orbit-portrait-quotes/scripts/check.mjs testimonials/index.html --out check
  21. reduced-motion|reduce
  22. ./testimonials/script.js
  23. node .claude/skills/orbit-portrait-quotes/scripts/check.mjs testimonials/index.html --out check
  24. ./check/1440.png
  25. ./check/390.png
  26. ./testimonials/style.css
  27. ./testimonials/style.css
  28. node .claude/skills/orbit-portrait-quotes/scripts/check.mjs testimonials/index.html --out check
  29. ./check/390.png
  30. Done

12 Nov 2026 · Claude Code 2.1.322 with Claude Sonnet 5.5 · 2 min 15 s · $0.33 of API use

Questions

Is Orbit Portrait Quotes free?

No. Orbit Portrait Quotes 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 Orbit Portrait Quotes?

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

What do I get when I buy Orbit Portrait Quotes?

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 Orbit Portrait Quotes?

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 ./orbit-portrait-quotes with your agent's flag.

What do I get from Orbit Portrait Quotes?

One HTML file with its CSS inside: no build step, no framework. A testimonial section with portraits orbiting a central quote. Checked at phone and desktop widths.

What does Orbit Portrait Quotes need?

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

How big is Orbit Portrait Quotes?

7 files, about 21,457 tokens in all. The SKILL.md is about 2,176 tokens, and your agent reads it only when the job fits.

What does a run cost?

Our 1 runs took 2 min 15 s to 2 min 15 s and $0.33 to $0.33 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 Orbit Portrait Quotes to use it?

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