← 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

All Available Options

Swing Origin
Top CenterTop LeftTop RightCenterBottom Center
Enable Swing
YesNo
Badge Style
BadgeRibbonTag
Badge Position
Top LeftTop RightBottom LeftBottom Right
Info Position
BelowOverlay
Shrink Easing
EaseEase InEase OutEase In-OutLinear
Other Controls
Circle Size (px)Circle ColorCircle OpacityShrink ScaleShrink Duration (ms)Swing Angle (deg)Swing Duration (ms)Gradient Enable