Drifting Quote Wallv1.0.1
Use this Skill to make marketing visuals.
- Yours to keep: the files stay on your computer.
- Payment by Waffo Pancake, our merchant of record.
- 38 free Skills to try first
A web design skill for Claude Fable 5 that lays customer quotes in up to three slowly drifting, looping columns, delivered as React source you paste in, edit and restyle through tokens.
Updated Nov 7, 2026
Preview gallery
Similar Skills
View all
What you get
- Every line of Drifting Quote Wall's source: the component itself plus a working usage example, ready to drop in and adjust.
- A written visual contract for palette, type scale, corner radius, icon stroke and motion timing, held as tokens you change in one spot.
- The block comes with its portraits and photographs, each already in position and saved inside your project instead of loaded from another host.
Good fit
- You want to show what customers say and would sooner start from a finished layout than tune one.
- You want each card's portrait, name, role and quote already proportioned against one another.
- You would rather have readable, editable source than another dependency to keep current.
Not for
- Teams that already run a mature design system; this block's palette and type scale will clash with it.
- Anyone wanting a versioned npm package; you receive source and keep it current yourself.
- Pages needing navigation, forms, sign-in or checkout; none of that is included here.
About this Skill
Drifting Quote Wall is a web design skill for Claude Fable 5 that makes customer quotes look composed rather than listed once you paste one block in. Each card balances portrait, name, role and words; swap in your quotes and the balance holds while every column drifts at its own speed.
How it works
- Tell the agent where the section goes; it studies your project before writing anything and matches the block to how the project is already put together.
- Drop in your own words; the type sizes and spacing hold their shape without further tuning.
- Add your own images: portraits wherever someone appears, photographs everywhere else.
- Look at it on a phone-width screen before publishing; it is designed to keep its layout there.
Checked before delivery
- The columns drift upwards without stopping, each at its own pace (15, 19 and 17 seconds a round), and a card lifts slightly when pointed at or reached with the Tab key
- One column on a phone, two from 768px and three from 1024px, with no sideways scrolling
- scripts/check-blocks.mjs reports no symbol icons, no off-palette blue or violet and no remote files
What you need before you start
- You bring
- The customer quotes to show, each with the person's name, role and a square portrait · Optional: the label, heading and line above the columns, and where on the page the section goes
- Dependencies
- React 18+ · Tailwind CSS · framer-motion · lucide-react
- Outside costs
- None
- Last tested
- v1.0.1 — Claude Code / Cursor
User reviews
Loading reviews…
FAQ
Which framework does it target?
React. The agent studies your repository before writing and then rebuilds the block in the stack you already use, so component shape, styling and event handling follow your conventions. A standalone HTML file comes only if you request one.
Does it call any outside service?
No. Fonts, icons and portraits live in your project and the demo page sends no network requests, which means nothing fails when a CDN or image host is down.
Can I swap in my own portraits?
Yes. Every quote points to a square portrait file in your project; drop your own pictures there, square and at least 80px wide for best results, and the round 40px frame crops each one the same way.