Menu

Post image 1
Post image 2
1 / 2
0

I redesigned my SaaS hub: every product card is a pure-CSS animation of what it does

DEV Community·Yanmiayn·29 days ago
#Rv4WWQe9
Reading 0:00
15s threshold

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.…

Continue reading — create a free account

Join HashtagPLUS to read full articles, follow hashtags, vote, and join the conversation.

Read More