A collection of animated background effects for the primary CTA section. These components are meant to be used together with LandingPrimaryImageCtaSection, LandingPrimaryTextCtaSection and LandingPrimaryVideoCtaSection.

On a landing page, they can make it stand out and make it more memorable and depending on the background effect - more engaging.

`LandingDotParticleCtaBg`

Dot Particle with CTA

Revolutionary Product Launch

Experience the future with our cutting-edge solution. Built for modern teams who demand excellence and reliability.

Start Free Trial

LandingDotParticleCtaBg API Reference

Prop Name	Prop Type	Required	Default
variant	`'default'` ǀ `'primary'` ǀ `'secondary'`	No	`'default'`
className	`string`	No	`-`

`LandingMouseHighlightCtaBg`

Mouse Highlight with CTA

Revolutionary Product Launch

Experience the future with our cutting-edge solution. Built for modern teams who demand excellence and reliability.

Start Free Trial

LandingMouseHighlightCtaBg API Reference

Prop Name	Prop Type	Required	Default
variant	`'default'` ǀ `'primary'` ǀ `'secondary'`	No	`'default'`
className	`string`	No	`-`

`LandingFlyingParticleCtaBg`

Flying Particles with CTA

Revolutionary Product Launch

Experience the future with our cutting-edge solution. Built for modern teams who demand excellence and reliability.

Start Free Trial

LandingFlyingParticleCtaBg API Reference

Prop Name	Prop Type	Required	Default
variant	`'default'` ǀ `'primary'` ǀ `'secondary'`	No	`'default'`
className	`string`	No	`-`

`LandingConicCtaBg`

Conic Gradient with CTA

Revolutionary Product Launch

Experience the future with our cutting-edge solution. Built for modern teams who demand excellence and reliability.

Start Free Trial

LandingConicCtaBg API Reference

Prop Name	Prop Type	Required	Default
variant	`'default'` ǀ `'primary'` ǀ `'secondary'`	No	`'default'`
className	`string`	No	`-`

`LandingBlobCtaBg`

Blob with CTA

Revolutionary Product Launch

Experience the future with our cutting-edge solution. Built for modern teams who demand excellence and reliability.

Start Free Trial

LandingBlobCtaBg API Reference

Prop Name	Prop Type	Required	Default
variant	`'default'` ǀ `'primary'` ǀ `'secondary'`	No	`'default'`
className	`string`	No	`-`
blobPosition	`'left'` ǀ `'right'` ǀ `'center'` ǀ `'top'` ǀ `'bottom'`	No	`'center'`

`LandingGridPatternCtaBg`

Grid Pattern with CTA

Revolutionary Product Launch

Experience the future with our cutting-edge solution. Built for modern teams who demand excellence and reliability.

Start Free Trial

Different Grid Sizes

Custom Grid Patterns

Explore different grid sizes to match your design aesthetic.

Large Grid

LandingGridPatternCtaBg API Reference

Prop Name	Prop Type	Required	Default
variant	`'default'` ǀ `'primary'` ǀ `'secondary'`	No	`'default'`
className	`string`	No	`-`
enableMouseTracking	`boolean`	No	`true`
gridSize	`'small'` ǀ `'medium'` ǀ `'large'` ǀ `'xlarge'` ǀ `number`	No	`'medium'`

`LandingCurvedLinesCtaBg`

Curved Lines with CTA

Revolutionary Product Launch

Experience the future with our cutting-edge solution. Built for modern teams who demand excellence and reliability.

Start Free Trial

LandingCurvedLinesCtaBg API Reference

Prop Name	Prop Type	Required	Default
variant	`'default'` ǀ `'primary'` ǀ `'secondary'`	No	`'default'`
speed	`'slow'` ǀ `'normal'` ǀ `'fast'`	No	`'normal'`
className	`string`	No	`-`

`LandingStraightLinesCtaBg`

Straight Lines with CTA

Revolutionary Product Launch

Experience the future with our cutting-edge solution. Built for modern teams who demand excellence and reliability.

Start Free Trial

LandingStraightLinesCtaBg API Reference

Prop Name	Prop Type	Required	Default
variant	`'default'` ǀ `'primary'` ǀ `'secondary'`	No	`'default'`
speed	`'slow'` ǀ `'normal'` ǀ `'fast'`	No	`'fast'`
className	`string`	No	`-`

`LandingEllipseSideCtaBg`

Ellipse Side Effects with CTA

Revolutionary Product Launch

Experience the future with our cutting-edge solution. Built for modern teams who demand excellence and reliability.

Start Free Trial

LandingEllipseSideCtaBg API Reference

Prop Name	Prop Type	Required	Default
variant	`'default'` ǀ `'primary'` ǀ `'secondary'`	No	`'default'`
className	`string`	No	`-`

`LandingFlickeringGridCtaBg`

Flickering Grid with CTA

Revolutionary Product Launch

Experience the future with our cutting-edge solution. Built for modern teams who demand excellence and reliability.

Start Free Trial

LandingFlickeringGridCtaBg API Reference

Prop Name	Prop Type	Required	Default
variant	`'default'` ǀ `'primary'` ǀ `'secondary'`	No	`'default'`
squareSize	`number`	No	`4`
gridGap	`number`	No	`6`
flickerChance	`number`	No	`0.1`
maxOpacity	`number`	No	`0.3`
className	`string`	No	`-`

`LandingWavesCtaBg`

Animated Waves with CTA

Revolutionary Product Launch

Experience the future with our cutting-edge solution. Built for modern teams who demand excellence and reliability.

Start Free Trial

LandingWavesCtaBg API Reference

Prop Name	Prop Type	Required	Default
variant	`'default'` ǀ `'primary'` ǀ `'secondary'`	No	`'default'`
waveSpeedX	`number`	No	`0.0125`
waveSpeedY	`number`	No	`0.005`
waveAmpX	`number`	No	`32`
waveAmpY	`number`	No	`16`
xGap	`number`	No	`10`
yGap	`number`	No	`32`
className	`string`	No	`-`

`LandingPathsCtaBg`

Animated Paths with CTA

Revolutionary Product Launch

Experience the future with our cutting-edge solution. Built for modern teams who demand excellence and reliability.

Start Free Trial

LandingPathsCtaBg API Reference

Prop Name	Prop Type	Required	Default
variant	`'default'` ǀ `'primary'` ǀ `'secondary'`	No	`'default'`
position	`number`	No	`1`
pathPosition	`'bottomLeft'` ǀ `'topRight'` ǀ `'bottomRight'` ǀ `'topLeft'`	No	`'topRight'`
pathCount	`number`	No	`36`
animationDuration	`number`	No	`20`
className	`string`	No	`-`

`LandingShapesCtaBg`

Animated Shapes with CTA

Revolutionary Product Launch

Experience the future with our cutting-edge solution. Built for modern teams who demand excellence and reliability.

Start Free Trial

Different Shape Types

Geometric Innovation

Discover stunning visual effects with our customizable shape backgrounds.

Explore Shapes

LandingShapesCtaBg API Reference

Prop Name	Prop Type	Required	Default
variant	`'default'` ǀ `'primary'` ǀ `'secondary'`	No	`'default'`
shapeType	`'ellipse'` ǀ `'circle'` ǀ `'rectangle'` ǀ `'triangle'` ǀ `'square'`	No	`'rectangle'`
shapeCount	`number`	No	`5`
animationSpeed	`'slow'` ǀ `'normal'` ǀ `'fast'`	No	`'normal'`
className	`string`	No	`-`

`LandingDiagonalCtaBg`

Diagonal Gradient with CTA

Revolutionary Product Launch

Experience the future with our cutting-edge solution. Built for modern teams who demand excellence and reliability.

Start Free Trial

LandingDiagonalCtaBg API Reference

Prop Name	Prop Type	Required	Default
variant	`'default'` ǀ `'primary'` ǀ `'secondary'`	No	`'default'`
intensity	`'light'` ǀ `'medium'` ǀ `'strong'`	No	`'medium'`
className	`string`	No	`-`

More Examples

For more even more examples, see our Landing Page Component Examples page or see complete landing page examples by Exploring Our Landing Page Templates.

Also see:

Primary Image Call to Action component for the main CTA integration
Primary Text Call to Action component for text-focused CTAs
Primary Video Call to Action component for video-based CTAs