Templates Event

Top 7 key effects

Event page with countdown, speakers and program schedule.

Rotating Gradient Background

Where: Hero background (behind countdown)

Two colored orbs (purple + pink) rotate slowly 360° in 40s. Creates a lively, futuristic atmosphere evoking tech conference energy.

animation: rotateBg 40s linear infinite + radial-gradient Explore Backgrounds →

Floating Particles

Where: 6 floating particles in Hero

Colored dots move up and down in a loop with staggered delays. Adds life to background without distracting from main content, mimicking event buzz.

animation: float 20s ease-in-out infinite + animation-delay Explore Atmosphere →
42days

Countdown Timer

Where: Hero center (Days, Hours, Minutes, Seconds)

Gradient numbers with bordered cards create urgency. Each card responds to hover with elevation, making countdown interactive.

background-clip: text + transform: translateY(-4px) on :hover Explore Data & Visualization →
Speaker

Speaker Card Lift

Where: Grid of 4+ speakers with photo and bio

Card rises 10px with purple shadow and gradient bar revealing at top via scaleX. Cubic-bezier easing (0.175, 0.885, 0.32, 1.275) gives subtle bounce.

transform: translateY(-10px) + cubic-bezier bounce Explore Cards & Layouts →
Programme

Timeline Slide

Where: Schedule/Agenda with daily tabs

Each program item shifts 8px right on hover with border change. Staggered fadeInUp animation on scroll reveals sessions progressively.

transform: translateX(8px) + animation: fadeInUp 0.8s Explore Scroll & Parallax →
Early Bird

Pricing Card Scale

Where: Grid of 3 pricing cards (Early Bird badges)

Featured card is pre-enlarged to scale(1.05) with floating gradient badge. Visual nudge technique naturally guiding visitor to recommended offer.

transform: scale(1.05) + translateY(-8px) on :hover Explore Cards & Layouts →
Fade In Up

Staggered Fade In

Where: Hero elements (date, title, location, countdown, CTA)

Each element appears with incremented 0.1s delay (backwards), creating visual cascade guiding eye from date badge to action buttons.

animation: fadeInUp 0.8s ease + animation-delay stagger Explore Transitions →