7.3 KiB
7.3 KiB
🌸 Proper Bloom Effect - Petals Moving Outward
The Problem
Petals were only scaling in place at the center point, making them all overlap and not creating a recognizable flower bloom. It looked like a blob, not a beautiful flower.
The Solution
Petals now move OUTWARD from center while scaling, creating a proper blooming flower effect.
Key Change: translateX
Before (Wrong)
/* Petals only scaled - stayed at center */
.outer-petal {
transform: scale(1); /* Just gets bigger at center */
}
After (Correct)
/* Petals scale AND move outward */
.outer-petal {
transform: scale(1.05) translateX(32px); /* Moves away from center! */
}
How It Works
Each petal is rotated to its angle, then translateX moves it along that angle:
Petal at 0°: translateX(32px) → moves RIGHT
Petal at 90°: translateX(32px) → moves DOWN
Petal at 180°: translateX(32px) → moves LEFT
Petal at 270°: translateX(32px) → moves UP
This creates radial outward movement from the center!
Transform Sequence
Closed State (Tight Bud) 🌷
All petals:
- scale(0.15-0.28) /* Very small */
- translateX(0) /* At center */
- Result: Tight bud at center point
Open State (Full Bloom) 🌸
Outer petals:
- scale(1.05) /* Full size */
- translateX(32px) /* Move far outward */
Middle petals:
- scale(1.0) /* Full size */
- translateX(20px) /* Move medium outward */
Inner petals:
- scale(0.95) /* Slightly smaller */
- translateX(12px) /* Move little outward */
Result: Layered flower bloom spreading from center!
Visual Comparison
BEFORE (All at center): AFTER (Spreading outward):
• • • • • • •
• • • • • •
• • 🗎 • • • 🗎 •
• • • • • •
• • • • • • •
(blob/cluster) (beautiful bloom)
All overlapping Proper spacing
No depth Clear layers
Not recognizable Looks like flower!
Distance Values
| Layer | Scale | TranslateX | Visual Effect |
|---|---|---|---|
| Closed State | |||
| Outer | 0.15 | 0px | At center |
| Middle | 0.20 | 0px | At center |
| Inner | 0.28 | 0px | At center |
| Open State | |||
| Outer | 1.05 | 32px | Furthest out, largest |
| Middle | 1.00 | 20px | Medium distance |
| Inner | 0.95 | 12px | Close to center |
| Explode (Click) | |||
| Outer | 1.25 | 50px | Burst outward! |
| Middle | 1.20 | 35px | Burst outward! |
| Inner | 1.15 | 25px | Burst outward! |
Layered Depth
Side View of Bloom:
Outer (32px out)
↗
Center → Middle (20px out)
↘
Inner (12px out)
Creates 3D flower appearance!
Animation Sequence
Time State
────────────────────────────────────────
0.0s Closed bud at center (scale 0.15)
0.0s Hover starts - bloom begins
Outer petals: scale → 1.05, move → 32px
0.1s Middle petals start blooming
Middle: scale → 1.0, move → 20px
0.2s Inner petals start blooming
Inner: scale → 0.95, move → 12px
1.1s Full bloom reached!
Beautiful layered flower visible
────── Mouse leaves
0.0s Petals return to center
All: scale → 0.15, move → 0px
1.1s Back to tight bud
Why This Works
✅ Radial Movement - translateX along rotated axis = outward from center
✅ Layered Spread - 3 distances create depth (32, 20, 12)
✅ Recognizable Shape - Now clearly looks like a flower
✅ Natural Motion - Like a real flower blooming
✅ Clear Separation - Petals don't overlap awkwardly
✅ 3D Effect - Different distances = dimensional appearance
Responsive Adjustments
Desktop (Full Effect)
Outer: translateX(32px)
Middle: translateX(20px)
Inner: translateX(12px)
Mobile (Scaled Down)
Outer: translateX(26px) /* Slightly less */
Middle: translateX(16px)
Inner: translateX(10px)
Touch Default (Semi-Open)
Outer: translateX(12px) /* Already spread */
Middle: translateX(8px)
Inner: translateX(5px)
Reduced Motion (Static Bloom)
Outer: translateX(18px) /* Nice display */
Middle: translateX(12px)
Inner: translateX(8px)
Click Burst Effect
When clicked, petals explode further outward:
Normal hover → Click burst → Return
Outer: 32px → 50px → 32px
Middle: 20px → 35px → 20px
Inner: 12px → 25px → 12px
Duration: 0.9s with bounce easing
Testing the Bloom
pnpm dev
Visit http://localhost:3000 and observe:
-
Closed State 🌷
- All petals tiny at center
- Compact, tight bud
- Single point appearance
-
Start Hovering 🌺
- Petals begin spreading outward
- Outer layer moves first and furthest
- Middle layer follows
- Inner layer last
-
Full Bloom 🌸
- Petals clearly spread in layers
- Outer ring visible (32px out)
- Middle ring visible (20px out)
- Inner ring visible (12px out)
- Recognizable flower shape!
-
Click Burst ✨
- Petals push even further out
- 50px, 35px, 25px distances
- Dramatic expansion effect
- Returns to full bloom state
-
Mouse Leave 🌷
- Petals smoothly return to center
- Scale down while moving inward
- Back to tight bud
Expected Reactions
- 😍 "Now THAT'S a flower!"
- 🌸 "I can see the bloom clearly!"
- ✨ "The petals actually spread out!"
- 🎨 "Beautiful layered effect!"
- 💫 "It looks like it's really blooming!"
Technical Details
Transform Order Matters
/* Correct order */
transform: scale(1.05) translateX(32px);
/* Wrong order - different result */
transform: translateX(32px) scale(1.05);
The transform applies right-to-left:
- First: translateX(32px) moves along rotated axis
- Then: scale(1.05) makes it bigger
Transform Origin
transform-origin: 128px 128px;
All petals rotate around the center point (128, 128).
Staggered Timing
Outer: transition-delay: 0s
Middle: transition-delay: 0.1s
Inner: transition-delay: 0.2s
Creates natural sequential bloom.
Summary of Fix
| Aspect | Before | After | Result |
|---|---|---|---|
| Movement | None (scale only) | translateX outward | Proper bloom |
| Appearance | Overlapping blob | Layered flower | Recognizable |
| Outer distance | 0px | 32px | Clear outer ring |
| Middle distance | 0px | 20px | Clear middle ring |
| Inner distance | 0px | 12px | Clear inner ring |
| Effect | Confusing | Beautiful | Professional |
Result
The flower now actually blooms! 🌸
- Petals spread outward in clear layers
- Creates recognizable flower shape
- Looks like a real peony blooming
- Beautiful, natural, impressive effect
From tight bud to spreading petals - a true bloom! 🌷→🌸
Fixed with precision for Valknar | pivoine.art