Design.
← All Components

Animations

Motion patterns and scroll-driven effects

Scroll Reveal

Elements fade in with translate and blur on scroll entry. Universal motion pattern.

scrollrevealfadeuniversal
Luxury Editorial

Scroll Reveal

0ms delay
60ms delay
120ms delay
180ms delay
240ms delay
300ms delay

Text Split Stagger

Headlines split into words/chars that stagger in. Dramatic editorial entrance.

textsplitstaggergsapeditorial
Luxury Editorial

Text Split Stagger

Buildwealthwithconfidenceandclarity

Character-level split:

PAGESTITCHES

Mask Wipe Reveal

Soft gradient mask wipe that reveals images/sections on scroll.

maskwiperevealgradient
Luxury Editorial

Mask Wipe Reveal

InteriorLeft → Right
InteriorCircle Expand

In production: driven by GSAP ScrollTrigger scrub

Blur to Sharp

Images start blurred and sharpen on scroll. Focus-pull cinematic effect.

blurfocuscinematicscroll
Luxury Editorial

Blur to Sharp

Architecture
blur: 12.0pxCinematic focus-pull

Grayscale to Color

Images transition from grayscale to full color on scroll entry.

grayscalecolortransitionscroll
Luxury Editorial

Grayscale to Color

Living RoomLiving Room
KitchenKitchen
BedroomBedroom

Hover to reveal color • In production: triggers on scroll entry

Infinite Marquee

Bidirectional seamless scrolling text with hover speed control and item scaling.

marqueeinfinitescrollkinetictypography
Luxury Editorial

Infinite Marquee

BrandingWeb DesignUI/UXPhotographyMotionStrategyDevelopmentIdentityBrandingWeb DesignUI/UXPhotographyMotionStrategyDevelopmentIdentityBrandingWeb DesignUI/UXPhotographyMotionStrategyDevelopmentIdentityBrandingWeb DesignUI/UXPhotographyMotionStrategyDevelopmentIdentity
PackagingTypographyIllustrationArt DirectionCopywritingAnimationPrintDigitalPackagingTypographyIllustrationArt DirectionCopywritingAnimationPrintDigitalPackagingTypographyIllustrationArt DirectionCopywritingAnimationPrintDigitalPackagingTypographyIllustrationArt DirectionCopywritingAnimationPrintDigital

Hover to slow down • Hover items to highlight • Bidirectional seamless loop

Text Scramble / Decode

Headlines decrypt character by character with random glyph cycling. Hacker aesthetic.

textscrambledecodehackercrypto
Luxury Editorial

Text Scramble / Decode

Hover to re-trigger

Magnetic Hover Cards

Cards magnetically pull toward cursor with 3D tilt and radial spotlight. Elastic snap-back.

magnetichover3dtiltinteractive
Luxury Editorial

Magnetic Hover

Brand Strategy
Visual Identity
Web Development
Motion Design
Art Direction
Photography

Move your mouse over the cards • 3D tilt + magnetic pull + spotlight

Typewriter Deluxe

Premium typewriter with variable speed, dissolve-delete, growing underline, and blinking cursor.

typewritertextrotationdissolvepremium
Luxury Editorial

Typewriter Deluxe

Your brand deserves
strategyconfidenceprecisionclarityvision

Variable typing speed • Dissolve-delete effect • Growing underline

Cursor Trail

Particle or ribbon trail follows cursor. Toggle between fading circles and SVG Bezier calligraphy.

cursortrailparticlesribboninteractive
Tech Futuristic

Cursor Trail

Move your mouse here

Particles: fading circles with blur dissipation • Ribbon: SVG Bezier calligraphic stroke

Text Reveal Scroll

Apple-style word-by-word progressive text reveal controlled by mouse or slider. Narrative scroll.

textrevealscrollapplenarrative
Luxury Editorial

Text Reveal Scroll

We believe design is not decoration. It is the invisible architecture that shapes how people feel about your business in the first five seconds. Every color traces to a material. Every font earns its place. Every section has a job emotional, commercial, and structural. We do not build websites. We build trust engines.

0%100%

Mouse X controls progress • Slider for manual control • In production: scroll-driven

Odometer Counter

Mechanical digit-rolling counter with per-column stagger and motion blur. Like car dashboards.

counterodometernumbersmechanicalrolling
Luxury Editorial

Odometer Counter

0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9

Projects Delivered

0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
%

Client Satisfaction

0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9

Years Experience

0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
+

Awards Won

Mechanical digit rolling • Staggered speed (ones fast, hundreds slow) • Motion blur • Hover to replay

Stacked Cards Fan

Cards stacked then fan out in arc on hover. Individual card highlight with glow.

cardsfanstackportfoliospread
Luxury Editorial

Stacked Cards Fan

Villa Serenity

Villa Serenity

Residential

Horizon Tower

Horizon Tower

Commercial

The Green House

The Green House

Sustainable

Artisan Loft

Artisan Loft

Interior

Cloud Nine

Cloud Nine

Hospitality

Hover to fan • Hover cards individually for highlight • Staggered spring animation

Morphing Blob

Organic shape continuously morphing via animated border-radius. Toggle organic/glassmorphism.

bloborganicgenerativemorphglassmorphism
Tech Futuristic

Morphing Blob

Creative

Studio

Continuous border-radius morphing • Mouse influences position • Toggle organic/glass

Liquid Reveal

Image reveals through SVG displacement filter creating liquid distortion. Ripple, wave, melt patterns.

liquidrevealsvgdisplacementdistortion
Luxury Editorial

Liquid Reveal

Interior

Click to reveal

SVG displacement • Ripple pattern

feTurbulence + feDisplacementMap • Click to replay

Semi-Circular Gallery

Cards arranged on a rotating semi-circular arc. Drag to rotate, auto-spins when idle. Depth-based scaling.

galleryarc3ddragcarousel
Luxury Editorial

Semi-Circular Gallery

Villa Serenity

Villa Serenity

Horizon Tower

Horizon Tower

The Green House

The Green House

Artisan Loft

Artisan Loft

Cloud Nine

Cloud Nine

Palm Estate

Palm Estate

Sky Residence

Sky Residence

Drag to rotate • Auto-rotates when idle • Cards scale by depth

Bounce Cards Shuffle

Cards scatter and settle with bounce physics. Auto-shuffles every 3 seconds. Click to trigger.

cardsbounceshufflephysicsrandom
Bold Startup

Bounce Cards Shuffle

B
Brand
W
Web
M
Motion
P
Photo
P
Print
U
UI/UX

Click to shuffle • Auto-shuffles every 3s • Bounce easing on scatter

Fluid Glass

Gradient blobs follow mouse at different speeds. Floating glass card tracks cursor with backdrop blur.

glassfluidgradientmouseparallax
Luxury Editorial

Fluid Glass

Fluid Glass

Follows your cursor with glassmorphic blur over fluid gradients

Design

Build

Ship

Mouse drives fluid gradient blobs + floating glass card • Multi-speed parallax layers

Floating Glass Menu

FAB button expands into glassmorphic menu items with staggered reveal. Liquid glass aesthetic.

menufabglassstaggerglassmorphism
Premium Minimal

Floating Liquid Glass Menu

Page Content Here

Home
Work
About
Services
Contact

Click the button to expand • Glassmorphic menu items • Staggered reveal animation

Focus Cards

Hover one card to focus — others blur, dim, and shrink. Smooth depth-of-field photography effect.

focusblurdepthhovercards
Luxury Editorial

Focus Cards

Interior Design

Interior Design

Luxury residential spaces

Architecture

Architecture

Modern structural design

Landscaping

Landscaping

Outdoor living environments

Renovation

Renovation

Complete transformations

Hover any card to focus • Others blur + dim + shrink • Smooth depth-of-field effect

Glowing Cards

Stripe-inspired glow border follows mouse position. Radial gradient spotlight inside card.

glowbordermousestripegradient
Tech Futuristic

Glowing Cards

Strategy

Brand positioning & market research

Learn more

Design

Visual identity & UI systems

Learn more

Development

Full-stack engineering

Learn more

Move mouse over cards • Glow follows cursor position • Stripe-inspired border effect

Dock

macOS-style dock with magnification on hover. Neighboring items scale proportionally. Click bounce animation.

dockmagnifymacoshoverscale
Tech Futuristic

Dock

Home
Search
Projects
Messages
Calendar
Settings
Profile

Hover for magnification • Click for bounce • macOS dock-style interaction

Lens

Magnifying glass effect over image. 2× zoom lens follows cursor with glassmorphic border.

lensmagnifyzoomcursorimage
Luxury Editorial

Lens

Interior
Materials
Lighting
Texture
Color
Form
Space

Hover to magnify • 2× zoom lens follows cursor • Glassmorphic lens border

Magic Card

Holographic gradient shifts with mouse movement. 3D perspective tilt. Three gradient modes: linear, radial, conic.

holographicgradient3dtiltiridescent
Luxury Editorial

Magic Card

01

Holographic

Prismatic light refraction

linear
02

Iridescent

Color-shifting surface

radial
03

Chromatic

Spectral dispersion effect

conic

Move mouse over cards • Holographic gradient follows cursor • 3D perspective tilt

Electro Border

Animated neon conic-gradient border with traveling spark. Corner accents and electric glow on hover.

neonborderelectricglowanimated
Tech Futuristic

Electro Border

Active

Neural Network

Deep learning architecture

Standby

Quantum Core

Parallel processing unit

Online

Cyber Shield

Threat detection system

Hover to activate • Animated neon border pulse • Electric glow effect