← Back to All Demos

Product Box

Circle-shrink hover reveal with swing animation. Showcase products with playful micro-interactions.

5
Variations
3
Swing Origins
CSS
Powered By
01

Variation 01

Default Circle + Swing

Standard 250px circle with swing on hover. Green background, top-center origin.

circle_size=250
enable_swing=yes
shrink_scale=0.6
swing_origin=top-center
New
Premium wireless headphones

Studio Pro X1

Premium noise-cancelling headphones

$299
New
Premium wireless headphones

Studio Pro X1

Premium noise-cancelling headphones

$299
02

Variation 02

Large Circle, No Swing

Bigger 300px circle without swing animation. Blue background, static reveal only.

circle_size=300
enable_swing=no
shrink_scale=0.6
circle_color=#E3F2FD
03

Variation 03

Small Circle, High Shrink

Smaller 200px circle with 80% shrink scale. More dramatic reveal with a tighter circle.

circle_size=200
shrink_scale=0.8
enable_swing=yes
swing_angle=3
New
Premium wireless headphones

Studio Pro X1

Premium noise-cancelling headphones

$299
New
Premium wireless headphones

Studio Pro X1

Premium noise-cancelling headphones

$299
04

Variation 04

Different Origin

Top-left swing origin with wider 8-degree angle. Creates an asymmetric pendulum effect.

swing_origin=top-left
swing_angle=8
circle_size=250
enable_swing=yes
05

Variation 05

Info Below

Product display without circle decoration. Clean layout with product info below the image.

circle_size=0
circle_opacity=0
enable_swing=yes
shrink_scale=0.6
New
Premium wireless headphones

Studio Pro X1

Premium noise-cancelling headphones

$299

All Variations

01
Default + Swing
circle_size250
enable_swingyes
shrink_scale0.6
swing_origintop-center
02
Large, No Swing
circle_size300
enable_swingno
shrink_scale0.6
03
Small, High Shrink
circle_size200
enable_swingyes
shrink_scale0.8
04
Different Origin
circle_size250
swing_origintop-left
swing_angle8
05
Info Below
circle_size0
circle_opacity0
enable_swingyes