7.4 KiB
✨ Pivoine Icon Update - CLOSED → OPEN on Hover!
🌷 → 🌸 The New Bloom Animation
The Pivoine Docs icon now features a beautiful blooming effect!
What Changed
BEFORE (Old Behavior):
- Icon always displayed with petals fully open
- Hover enhanced the glow and effects
- Static appearance on load
AFTER (New Behavior):
- Icon starts CLOSED as a tight bud 🌷
- BLOOMS OPEN on hover 🌸
- Returns to closed when mouse leaves
- Creates a delightful "knowledge blooming" metaphor
📊 Visual Comparison
┌─────────────────────────────────────────────────────────┐
│ BEFORE (Always Open) AFTER (Closed → Open) │
├─────────────────────────────────────────────────────────┤
│ │
│ Default: Hover: Default: Hover: │
│ 🌸 → 🌸✨ 🌷 → 🌸✨ │
│ (open) (glowing) (bud) (bloom) │
│ │
│ No visual Enhanced Closed Opens │
│ change on effects bud completely │
│ load only │
└─────────────────────────────────────────────────────────┘
🎭 State Breakdown
1. Initial Load (New)
Petals: CLOSED (30-50% size)
Effect: Tight bud
Visual: 🌷
Status: Waiting to bloom
2. Hover Start (New)
Petals: BLOOMING (30% → 100% size)
Effect: Smooth expansion
Visual: 🌺
Status: Opening up
Time: 0.8 seconds
3. Fully Bloomed (New)
Petals: OPEN (100% size)
Effect: Full display + glow
Visual: 🌸✨
Status: Knowledge revealed
4. Mouse Leave (New)
Petals: CLOSING (100% → 30% size)
Effect: Smooth contraction
Visual: 🌺 → 🌷
Status: Back to bud
Time: 0.8 seconds
🎯 Why This Is Better
User Experience
✅ More engaging - Movement catches the eye ✅ Interactive feedback - Clear response to hover ✅ Delightful surprise - Unexpected transformation ✅ Memorable - Unique interaction pattern ✅ Metaphorical - "Knowledge blooms" when explored
Technical Excellence
✅ Smooth animation - 0.8s cubic-bezier transition ✅ Staggered timing - Natural bloom sequence ✅ Performance - GPU-accelerated CSS transforms ✅ Accessible - Reduced motion shows semi-open state ✅ Reversible - Smoothly returns to closed
Brand Story
✅ Peony connection - Real flowers bloom open ✅ Documentation metaphor - Knowledge "blooms" ✅ Welcoming gesture - Invites exploration ✅ Professional polish - Shows attention to detail
📐 Technical Details
Petal Sizes by State
| Layer | Closed (Default) | Open (Hover) | Burst (Click) |
|---|---|---|---|
| Outer | 30% scale | 100% scale | 130% scale |
| Middle | 40% scale | 100% scale | 130% scale |
| Inner | 50% scale | 100% scale | 130% scale |
Opacity by State
| Layer | Closed | Open | Burst |
|---|---|---|---|
| Outer | 50% | 85% | 80% |
| Middle | 60% | 90% | 85% |
| Inner | 70% | 95% | 90% |
Timing
Transition: 0.8s cubic-bezier(0.34, 1.56, 0.64, 1)
└─ smooth bounce easing
Stagger:
Outer: 0.00s delay
Middle: 0.05s delay
Inner: 0.10s delay
└─ creates sequential bloom
🎬 Animation Sequence
Time Event
─────────────────────────────────────────
0.00s Mouse enters hover area
0.00s Outer petals start blooming
0.05s Middle petals start blooming
0.10s Inner petals start blooming
0.80s All petals fully bloomed
0.80s+ Continuous hover effects
(glow, pulse, sparkle)
───── Mouse leaves hover area
0.00s Petals start closing
0.80s Back to closed bud state
💻 Code Changes
Key CSS Update
/* NEW: Closed state by default */
.outer-petal {
transform: scale(0.3); /* Start small */
opacity: 0.5;
transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* NEW: Open on hover */
.is-interactive:hover .outer-petal {
transform: scale(1); /* Bloom to full size */
opacity: 0.85;
filter: url(#intense-glow);
}
Non-Interactive State
/* For cards/lists - show slightly open */
.not-interactive .outer-petal {
transform: scale(0.85); /* Partially open */
opacity: 0.85;
}
🎨 Use Cases
Interactive (Default)
Use for: Hero sections, splash screens, about pages Behavior: Closed → Opens on hover → Closes on leave Example: Landing page hero icon (current)
Non-Interactive
Use for: Cards, lists, avatars, small displays Behavior: Shows slightly open (85% size), no animation Example: Project cards, sidebar, documentation lists
📱 Responsive Behavior
Desktop
- Full bloom animation on hover
- Smooth, dramatic transformation
- Clear visual feedback
Mobile/Touch
- Tap triggers bloom
- Opens and stays open briefly
- Auto-closes after interaction
Reduced Motion
- Shows in semi-open state (85%)
- No animations
- Still beautiful and clear
✨ Testing the New Animation
# Start dev server
pnpm dev
# Visit http://localhost:3000
# You'll see the closed bud on load
# Hover over the icon
# Watch it bloom open smoothly
# Move mouse away
# See it close back to bud
# Click for burst effect!
🎊 User Reactions (Expected)
- 😮 "Whoa, did that just bloom?!"
- 🤩 "That's so smooth!"
- 🌸 "I love how it opens up!"
- 💡 "Clever metaphor for documentation!"
- ⭐ "The attention to detail is amazing!"
📚 Documentation Updates
All docs have been updated:
- ✅
components/icons/PivoineDocsIcon.tsx- Component code - ✅
components/README.md- Component guide - ✅
components/icons/PIVOINE_DOCS_ICON.md- Full docs - ✅
components/icons/BLOOM_UPDATE.md- This change explained - ✅
ICON_COMPLETE.md- Integration summary
🚀 Summary
What You Get
🌷 Closed initial state - Petals start small (30-50%) 🌸 Smooth bloom on hover - Opens in 0.8s with stagger 💫 Natural timing - Outer → Middle → Inner sequence ✨ Enhanced effects - Glow, burst, fan on full bloom 🔄 Reversible - Closes smoothly when hover ends ♿ Accessible - Reduced motion shows semi-open 📱 Touch-friendly - Tap to bloom on mobile
Why It's Better
The closed → open animation:
- Creates stronger engagement through movement
- Provides clear hover feedback for interactivity
- Adds delightful surprise factor
- Reinforces "knowledge blooms" metaphor
- Shows premium attention to detail
- Makes the icon more memorable
🎯 Result
Your Pivoine icon now has a signature interaction that:
- Catches attention with movement
- Invites user engagement
- Rewards interaction with beauty
- Tells your brand story
- Sets you apart from generic icons
From bud to bloom - your knowledge opens up! 🌷→🌸✨
Updated for Valknar | pivoine.art