I just redesigned yanmiayn.com — my one-person SaaS hub — and the part I'm proudest of is that every product card on the homepage is a pure-CSS animation of what the product actually does.
Hover the cards on the page to see them in motion. No SVGs, no JS for the animations themselves — only transform, keyframes, and cubic-bezier.
The four cards
1. Consensus Cold Outreach Worker — $29 ($0 → $10K MRR public log)
6 small dots arranged in a circle (each = one LLM). They collapse toward the center. One dot — the "winner" — rises in the middle, full opacity, scaled up. Loop.
2. Infpilntr — Parallel RFQ
A single source dot on the left. Three legs fan out (rotated -26°, 0°, +26°) with scaleX from 0 → 1, staggered by 120ms. Each lands on a far-right end dot.
3. DocChase — Doc intake
Three "papers" stack at the top. Each translateY(70px) rotate(2deg) scale(0.6) with cubic-bezier(0.34, 1.56, 0.64, 1). Staggered 1.2s apart. They literally slide into a folder shape (CSS ::before for the tab).
4. OpenClaw Consensus API — 9 LLMs in one endpoint
Nine dots sit on a circle (rotate(40°i) translateY(-56px)). The whole ring breathes — radius 64 → 42 → 64 — with a center "core" pulsing in inverse rhythm.
Stack
- Tailwind CDN
- Inter + JetBrains Mono
- Vanilla CSS keyframes (no library)
- Express + Resend on Hetzner for the email subscribe form (working —
/api/subscribeposts to a JSON line file + sends a welcome via Resend)
The "honest" part
- Grayscale only. No orange CTAs, no rose badges, no violet pills. Zinc tokens 50–900.
- Two subscribe forms (hero + footer) — ranked by where attention actually lands.
- Email actually sends. From
hello@yanmiayn.com(DKIM + SPF verified on Resend).
If you build similar one-person stacks, I'd love brutal feedback on the conversion path: hover → product page → Gumroad checkout. Or if any of the keyframes are uglier than they look on hover, please tell me.
Live: yanmiayn.com
Source for the four animations is inlined in the homepage <style> block — view-source:https://www.yanmiayn.com/ and search for a-vote, a-split, a-doc, a-breathe.
— solo founder, public log in progress
Top comments (0)