home/Projects/docs.pivoine.art/components/icons/BLOOM_UPDATE.md

🌸 Pivoine Docs Icon - Closed/Open States Update

✨ New Behavior: Closed → Open on Hover

The Pivoine Docs Icon now features a beautiful blooming animation!

Initial State: CLOSED 🌷

• Petals start small and close to the center
• Outer petals: 30% size, 50% opacity
• Middle petals: 40% size, 60% opacity
• Inner petals: 50% size, 70% opacity
• Flower appears as a tight bud

Hover State: OPEN 🌸

• Petals bloom outward to full size
• Smooth 0.8s cubic-bezier transition
• Staggered timing for natural bloom:
  • Outer petals bloom first
  • Middle petals follow (0.05s delay)
  • Inner petals last (0.1s delay)
• All petals reach 100% size and full opacity
• Enhanced glow effects activate

Visual Effect

Closed (default):      Hover (blooming):       Click (burst):
    🌷          →           🌸            →          ✨
   (bud)              (full bloom)            (explosion)

🎯 States Comparison

State	Outer Petals	Middle Petals	Inner Petals	Effect
Closed (default)	30% scale	40% scale	50% scale	Tight bud
Non-interactive	85% scale	88% scale	90% scale	Slightly open
Hover (bloom)	100% scale	100% scale	100% scale	Full bloom
Click (burst)	130% scale	130% scale	130% scale	Explosion

🎨 Animation Details

Timing

• Transition duration: 0.8s
• Easing: cubic-bezier(0.34, 1.56, 0.64, 1) - bouncy bloom
• Stagger delays: 0s → 0.05s → 0.1s (outer to inner)

Visual Changes

Closed State:

• Petals scaled down and condensed
• Reduced opacity for depth
• Documents still visible in center
• Sparkles still twinkling
• Subtle animations continue

Open State (Hover):

• Petals expand to natural size
• Full opacity and glow
• Enhanced shadow effects
• Center glows brightly
• All animations intensify

💡 Why This Works

1. Metaphor: Represents knowledge "blooming" as you explore
2. Engagement: Invites interaction through visual curiosity
3. Delight: Satisfying transformation surprises users
4. Natural: Mimics real flower behavior
5. Smooth: Staggered timing feels organic

📝 Code Changes

Before (Always Open)

.petal {
  transform: scale(1);
  opacity: 0.85;
}

After (Closed → Open)

/* Closed by default */
.outer-petal {
  transform: scale(0.3);
  opacity: 0.5;
}

/* Open on hover */
.is-interactive:hover .outer-petal {
  transform: scale(1);
  opacity: 0.85;
}

🎭 Usage Notes

Interactive Mode (Default)

• Starts closed (tight bud)
• Opens on hover (full bloom)
• Click for burst effect
• Returns to closed on mouse leave

Non-Interactive Mode

• Starts slightly open (85-90% size)
• Static, no hover effects
• Better for cards/lists where you want visibility
• Still shows the beautiful design

Example Usage

// Interactive - starts closed, blooms on hover
<PivoineDocsIcon size="200px" />

// Non-interactive - slightly open, static
<PivoineDocsIcon size="64px" interactive={false} />

✨ Benefits

✅ More engaging - Invites user interaction
✅ Metaphorical - "Knowledge blooms" as you explore
✅ Delightful - Surprising transformation creates joy
✅ Natural - Follows real flower blooming behavior
✅ Smooth - Staggered animation feels organic
✅ Accessible - Reduced motion users see semi-open state

🎬 Animation Timeline

Time    Event
────────────────────────────────────
0.0s    Mouse enters → bloom starts
0.0s    Outer petals begin expanding
0.05s   Middle petals begin expanding  
0.1s    Inner petals begin expanding
0.8s    All petals fully bloomed
        (continuous hover animations)
────    Mouse leaves → petals close
0.8s    Back to closed bud state

🎨 Visual States

1. Initial Load (Closed)

     •
   • • •
  •  🗎  •
   • • •
     •
   (bud)

2. Hover Start (Blooming)

    • •
  •   •   •
 •    🗎    •
  •   •   •
    • •
 (opening)

3. Fully Bloomed

  •   •   •
 •    •    •
•     🗎     •
 •    •    •
  •   •   •
  (bloom!)

4. Click (Burst)

 •     •     •
   •   •   •
•    ✨🗎✨    •
   •   •   •
 •     •     •
  (explode!)

🔧 Customization

Want to adjust the closed/open states?

Change Initial Size (Closed State)

.outer-petal {
  transform: scale(0.3);  /* 0 = fully closed, 1 = fully open */
}

Adjust Bloom Speed

.outer-petal {
  transition: all 0.8s;  /* Make faster: 0.4s, slower: 1.2s */
}

Modify Stagger Timing

.outer-petal { transition-delay: 0s; }
.middle-petal { transition-delay: 0.05s; }  /* Adjust these */
.inner-petal { transition-delay: 0.1s; }

📱 Responsive Behavior

Desktop

• Full bloom animation on hover
• Smooth 0.8s transition
• Staggered petal opening

Mobile/Touch

• Tap to trigger bloom
• Automatic return to closed after interaction
• Optimized touch targets

Reduced Motion

• Shows in semi-open state (85-90%)
• No animations
• Static display
• Still beautiful and clear

🎯 Perfect For

✅ Hero sections - dramatic entrance effect
✅ Landing pages - engaging first impression
✅ About pages - tells a story
✅ Portfolio sites - shows attention to detail
✅ Documentation hubs - "knowledge blooming"

🚀 See It In Action

pnpm dev

Visit http://localhost:3000 and:

1. See the closed bud on page load
2. Hover over icon to watch it bloom open
3. Move mouse away to see it close again
4. Click for burst effect
5. Enjoy the smooth, natural animation!

---

Updated for Valknar | pivoine.art

From bud to bloom - knowledge opens up 🌷→🌸