Landing Page Primary CTA Background Effects Components
- Updated on
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.
LandingDotParticleCtaBg API Reference
Prop NameProp TypeRequiredDefault 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.
LandingMouseHighlightCtaBg API Reference
Prop NameProp TypeRequiredDefault 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.
LandingFlyingParticleCtaBg API Reference
Prop NameProp TypeRequiredDefault 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.
LandingConicCtaBg API Reference
Prop NameProp TypeRequiredDefault 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.
LandingBlobCtaBg API Reference
Prop NameProp TypeRequiredDefault 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.
Different Grid Sizes
LandingGridPatternCtaBg API Reference
Prop NameProp TypeRequiredDefault 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.
LandingCurvedLinesCtaBg API Reference
Prop NameProp TypeRequiredDefault 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.
LandingStraightLinesCtaBg API Reference
Prop NameProp TypeRequiredDefault 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.
LandingEllipseSideCtaBg API Reference
Prop NameProp TypeRequiredDefault 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.
LandingFlickeringGridCtaBg API Reference
Prop NameProp TypeRequiredDefault 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.
LandingWavesCtaBg API Reference
Prop NameProp TypeRequiredDefault 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.
LandingPathsCtaBg API Reference
Prop NameProp TypeRequiredDefault 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.
Different Shape Types
Geometric Innovation
Discover stunning visual effects with our customizable shape backgrounds.
LandingShapesCtaBg API Reference
Prop NameProp TypeRequiredDefault 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.
LandingDiagonalCtaBg API Reference
Prop NameProp TypeRequiredDefault 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