Spoofproof Style Components
Color Palette
Primary (Blue)
Secondary (Orange)
Tertiary (Red)
UI Elements
Buttons
Cards
Default Card
Standard card style
Shadow Card
With elevation
Colored Card
Brand colors
Badges
✓ SuccessInfoWarningError
Animation Elements
Device
📱
Data Packet
TOTP+SIG
data • signature
Secure Tunnel
Terminal / Code Style
# Spoofproof Authentication
$ spoofproof verify --domain example-bank.com
→ DNS over HTTPS: validated ✓
→ Tunnel established ✓
→ TOTP verified ✓
→ Authentication complete!
Interactive States
Hover Effects
Hover me for gradient
Hover me for border
Loading States
Processing...
3D Rotate Y Animation Preview
Default (240deg, 300ms, ease-out)
Default
90deg (300ms, ease-out)
90deg
180deg (500ms, ease-out)
180deg
360deg (700ms, ease-in-out)
360deg
Fast Spin (360deg, 200ms, linear)
Fast!
Slow (240deg, 1000ms, ease-in-out)
Slow
Hover to Animate (240deg, 500ms, ease-out)
Hover Me!
data transfer examples
example 1
example 2
example 3
example 4
example 5
example 6
example 7
example 8
example 9
example 10
example 11
example 12
example 13
example 14
example 15
example 16
example 17
example 18
example 19
example 20
example 21all possible positions
example 22fully automatic
Fully Automatic Adaptive Curvature
example 23proportional override
Same Distance (800px), Different Overrides
0.5x (subtle)
1.0x (adaptive)
1.5x (pronounced)
2.0x (dramatic)
example 24curvature presets
Curvature Presets
example 25adaptive scaling
How Adaptive Curvature Scales
All using curveIntensity={1.0} (adaptive):
200px → curvature ≈ 0.25
600px → curvature ≈ 0.30
1000px → curvature ≈ 0.34
1600px → curvature ≈ 0.39 (prevents straight line!)