Pattern Showcase: Block Demos

Showcasing all Voyager block demo patterns โ€” pre-configured examples of each custom Gutenberg block.


Demo: Animated Counters

By the Numbers

Watch the numbers count up as you scroll. Each counter animates independently with GSAP.

0+
Happy Clients
Businesses trust us with their growth
0%
Satisfaction Rate
Based on post-project surveys
$0
Revenue Generated
For our clients in the last year
0 Years
Experience
In digital marketing and web design

Demo: Animated Sections

Scroll-Triggered Animations

Each section animates independently as it enters the viewport. Powered by GSAP ScrollTrigger.

Fade Left

This card slides in from the left with a smooth GSAP animation on scroll.

Fade Up

This card rises up with a staggered delay, creating a cascading entrance effect.

Fade Right

This card slides in from the right, completing the staggered three-column animation.


Demo: Before/After Comparison Slider

See the Difference

Drag the slider to compare before and after. Smooth interaction powered by GSAP.

After redesign
Before redesign
BeforeAfter

Demo: Cursor Trail Effect

Move Your Cursor

Particles follow your cursor with smooth GSAP quickTo interpolation. The trail uses screen blend mode for a glowing effect against the dark background.


Demo: Hero Showcase

We Build Digital Experiences

Award-winning design studio crafting brands that move people.


Demo: MacOS Dock Navigation

Dock Navigation

Hover over the icons below. Spring-physics magnification creates a natural, delightful interaction.


Demo: Magnetic Hover Cards

Magnetic Interaction

Hover over the cards to experience magnetic attraction, 3D tilt, and glow effects.

๐ŸŽจ

Design

Beautiful interfaces crafted with precision. Every pixel intentional, every interaction delightful.

โšก

Performance

Lightning-fast load times with optimized assets. GSAP animations run at 60fps even on mobile.

๐Ÿš€

Growth

Scalable architecture built for growth. From startup to enterprise, we have you covered.


Demo: Parallax Section

โญโญโญ

Layers of Depth

Each layer scrolls at a different speed โ€” 0.3x, 0.6x, and 1.0x โ€” creating a natural sense of depth. The fastest layer fades in as it enters view.


Demo: Portfolio Filter Grid

Our Portfolio

Click the category filters to see smooth GSAP-powered layout transitions.

No portfolio items found.


Demo: Scroll Progress Indicator


Demo: Testimonial Carousel

What Our Clients Say

Auto-rotating carousel with smooth GSAP transitions. Pauses on hover.


Demo: Text Reveal Animations

GSAP Text Reveal

Words that move. Letters that dance.

Character-by-character reveal creates a typewriter-like effect that draws the reader in one letter at a time.

Line-by-line reveals work beautifully for longer passages of text, creating a reading rhythm.