A package that provides everything you need to build modern, fast, and maintainable websites following clean code and best practices.
npm install @innovista/ui
Build beautiful, fast, and maintainable websites with our collection of carefully crafted React components.
---
| 🎨 Beautiful Carefully designed components | ⚡ Fast Optimized performance | 📦 Lightweight Tree-shakeable imports |
| 🔷 TypeScript Full type support | 🎯 Flexible Works everywhere | 🛠️ Customizable Highly configurable |
Install the package using your favorite package manager:
``bashnpm
npm install @innovista/ui
💡 Note for PowerShell users
Use quotes when installing scoped packages:
powershell
npm install "@innovista/ui"
`
🧩 Components
$3
> An animated crystal ball background component with customizable styles and smooth pulsating animations. Perfect for creating eye-catching hero sections and landing pages.
💡 Pro Tip: When you provide
, text rendering is automatically disabled to avoid conflicts.
#### 📋 Props
| Prop | Type | Default | Description |
| --------------- | ------------------------------------ | ---------- | ----------------------------------- |
|
width | string \| number \| "auto" \| null | "auto" | Width of the component |
| height | string \| number \| "auto" \| null | "auto" | Height of the component |
| styleSettings | StyleSettings | Optional | Animation and styling configuration |
| children | React.ReactNode | - | Content to display over animation |
📝 StyleSettings Interface
`typescript
interface StyleSettings {
// Background Configuration
backgroundColor?: string | null; // Background color
backgroundImage?: string | null; // Optional background image URL // Circle Colors (from outer to inner)
circle1Color: string; // Outermost circle color
circle2Color: string; // Second circle color
circle3Color: string; // Third circle color
circle4Color: string; // Innermost circle color
// Animation Settings
speed: number | string; // Animation speed (higher = faster)
// Text Configuration
enableText: boolean; // Show/hide center text
textContent?: string; // Text to display
textColor?: string; // Text color
textSize?: string | number; // Text size
}
`
#### 📚 Usage Examples
Basic Usage
tsx
import { CrystalBall } from "@innovista/ui";function HeroSection() {
return (
Welcome to Innovista
Building amazing experiences
);
}
`
Advanced Example with Custom Styling
tsx
import { CrystalBall } from "@innovista/ui";function AdvancedExample() {
const styleSettings = {
backgroundColor: "#1a1a2e",
backgroundImage: null,
circle1Color: "#16213e",
circle2Color: "#0f3460",
circle3Color: "#533483",
circle4Color: "#e94560",
speed: 1.5, // Faster animation
enableText: true,
textContent: "Innovista UI",
textColor: "#ffffff",
textSize: 48,
};
return (
display: "flex",
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
height: "100%",
color: "white",
}}
>
Beautiful Animations
Create stunning visual effects with ease
Next.js Integration
tsx
// app/page.tsx or pages/index.tsx
import { CrystalBall } from "@innovista/ui";export default function HomePage() {
return (
height="100vh"
styleSettings={{
backgroundColor: "#0f0f23",
circle1Color: "#1a1a3e",
circle2Color: "#2d2d5e",
circle3Color: "#4a4a8e",
circle4Color: "#6b6bbe",
speed: 1,
enableText: true,
textContent: "Next.js + Innovista",
textColor: "#ffffff",
textSize: 40,
}}
>
Welcome to Next.js
);
}
`
With Custom Background Image
tsx
import { CrystalBall } from "@innovista/ui";function CustomStyled() {
return (
height="500px"
styleSettings={{
backgroundColor: "transparent",
backgroundImage: "/your-image.jpg'",
circle1Color: "rgba(255, 255, 255, 0.1)",
circle2Color: "rgba(255, 255, 255, 0.2)",
circle3Color: "rgba(255, 255, 255, 0.3)",
circle4Color: "rgba(255, 255, 255, 0.4)",
speed: 0.8, // Slower animation
enableText: false,
textContent: "",
textColor: "#ffffff",
textSize: 37,
}}
>
{/ Your custom content /}
);
}
`
---
$3
> A mesmerizing animated background component featuring dynamic floating circles with customizable colors, speeds, and effects. Create stunning visual experiences with layered animations and blend modes.
💡 Pro Tip: Use
presets (subtle, normal, intense) for quick setup, or fine-tune every detail with the advanced prop.
#### 📋 Props
| Prop | Type | Default | Description |
| ----------------- | ----------------------------------- | ----------- | -------------------------------------------- |
|
width | string \| number \| "auto" | "auto" | Width of the component |
| height | string \| number \| "auto" | "auto" | Height of the component |
| backgroundColor | string | "#123" | Background color |
| backgroundImage | string | undefined | Optional background image URL |
| speed | number \| string | 1 | Animation speed (higher = faster) |
| intensity | "subtle" \| "normal" \| "intense" | "normal" | Preset intensity level |
| advanced | AnimatedCirclesAdvancedSettings | undefined | Advanced customization (overrides intensity) |
| children | React.ReactNode | - | Content to display over animation |
📝 Intensity Presets
`typescript
// Built-in intensity presets
const INTENSITY_PRESETS = {
subtle: {
count: 20, // Fewer circles
size: 5, // Smaller size
spread: 2, // Tighter spread
opacity: 0.6, // More transparent
layers: 2, // Fewer layers
},
normal: {
count: 40,
size: 7,
spread: 3,
opacity: 0.9,
layers: 4,
},
intense: {
count: 80, // More circles
size: 10, // Larger size
spread: 4, // Wider spread
opacity: 1, // Fully opaque
layers: 6, // More layers
},
};
`
📝 AnimatedCirclesAdvancedSettings Interface
typescript
interface AnimatedCirclesAdvancedSettings {
// Circle Configuration
count?: number | string; // Number of circles (overrides intensity preset)
size?: number | string; // Size of circles (overrides intensity preset)
spread?: number | string; // Spread radius (overrides intensity preset)
opacity?: number; // Circle opacity 0-1 (overrides intensity preset)
layers?: number; // Number of animation layers (overrides intensity preset) // Animation Controls
animation?: {
rotation?: boolean; // Enable rotation animation (default: true)
scale?: boolean; // Enable scale animation (default: true)
translation?: boolean; // Enable translation animation (default: true)
};
// Visual Effects
blendMode?: "screen" | "multiply" | "overlay" | "lighten" | "darken" | "color-dodge" | "color-burn";
}
`
#### 📚 Usage Examples
Basic Usage - Using Intensity Presets
tsx
import { AnimatedCircles } from "@innovista/ui";function HeroSection() {
return (
Beautiful Animated Backgrounds
Create stunning visual effects effortlessly
);
}
`
Simple Setup - Three Different Intensities
tsx
import { AnimatedCircles } from "@innovista/ui";// Subtle - Perfect for light backgrounds
function SubtleExample() {
return (
Subtle and Elegant
);
}
// Normal - Balanced default
function NormalExample() {
return (
Perfect Balance
);
}
// Intense - Maximum impact
function IntenseExample() {
return (
Bold and Dynamic
);
}
`
Advanced Example with Custom Settings
tsx
import { AnimatedCircles } from "@innovista/ui";function AdvancedExample() {
return (
height="100vh"
backgroundColor="#000000"
speed={1.5}
intensity="intense"
advanced={{
count: 60,
size: 10,
spread: 4,
opacity: 0.95,
layers: 6,
blendMode: "screen",
animation: {
rotation: true,
scale: true,
translation: true,
},
}}
>
textAlign: "center",
color: "white",
padding: "2rem",
}}
>
Innovista UI
Next-level animations
Subtle Background Effect
tsx
import { AnimatedCircles } from "@innovista/ui";function SubtleBackground() {
return (
height="600px"
backgroundColor="#f5f5f5"
speed={0.5}
intensity="subtle"
advanced={{
opacity: 0.4,
blendMode: "multiply",
}}
>
Elegant Content Section
Subtle animations enhance without overwhelming
);
}
`
Intense Visual Experience
tsx
import { AnimatedCircles } from "@innovista/ui";function IntenseVisual() {
return (
height="100vh"
backgroundColor="#120458"
speed={2}
intensity="intense"
advanced={{
size: 12,
spread: 5,
layers: 8,
blendMode: "color-dodge",
}}
>
display: "flex",
alignItems: "center",
justifyContent: "center",
height: "100%",
color: "white",
fontSize: "4rem",
fontWeight: "bold",
}}
>
WOW!
Next.js Integration
tsx
// app/page.tsx or pages/index.tsx
import { AnimatedCircles } from "@innovista/ui";export default function HomePage() {
return (
height="100vh"
backgroundColor="#0f0f23"
speed={1.2}
intensity="normal"
advanced={{
count: 50,
size: 8,
spread: 3.5,
opacity: 0.85,
layers: 5,
blendMode: "screen",
}}
>
Next.js + Innovista UI
Beautiful animations out of the box
);
}
`
---
$3
> A dynamic animated background component featuring expanding and moving balls that create mesmerizing visual effects. Perfect for modern, energetic designs with customizable colors, speeds, and interactive effects.
💡 Pro Tip: Use
presets (subtle, normal, intense) for quick setup, or customize with convenience props (count, colors) or fine-tune with the advanced prop.
#### 📋 Props
| Prop | Type | Default | Description |
| ----------------- | ----------------------------------- | ----------- | -------------------------------------------- |
|
width | string \| number \| "auto" | "auto" | Width of the component |
| height | string \| number \| "auto" | "auto" | Height of the component |
| backgroundColor | string | "#000000" | Background color |
| backgroundImage | string | undefined | Optional background image URL |
| speed | number \| string | 1 | Animation speed (higher = faster) |
| intensity | "subtle" \| "normal" \| "intense" | "normal" | Preset intensity level |
| count | number | undefined | Number of balls (overrides intensity preset) |
| colors | string[] | undefined | Color palette (overrides default) |
| advanced | ExpandingBallsAdvancedSettings | undefined | Advanced customization (overrides intensity) |
| children | React.ReactNode | - | Content to display over animation |
📝 Intensity Presets
`typescript
// Built-in intensity presets
const INTENSITY_PRESETS = {
subtle: {
count: 30, // Fewer balls
size: { min: 3, max: 10 }, // Smaller size range
expansionRate: 0.05, // Slower expansion
velocityRange: 2, // Slower movement
effects: { glow: false, trails: false, mouseInteraction: false },
},
normal: {
count: 70, // Balanced number
size: { min: 4, max: 16 }, // Medium size range
expansionRate: 0.1, // Moderate expansion
velocityRange: 4, // Moderate movement
effects: { glow: false, trails: false, mouseInteraction: false },
},
intense: {
count: 120, // More balls
size: { min: 5, max: 20 }, // Larger size range
expansionRate: 0.15, // Faster expansion
velocityRange: 6, // Faster movement
effects: { glow: true, trails: true, mouseInteraction: false },
},
};
`
📝 ExpandingBallsAdvancedSettings Interface
typescript
interface ExpandingBallsAdvancedSettings {
// Ball Configuration
count?: number; // Number of balls (overrides intensity preset)
size?: {
min?: number; // Minimum ball size in pixels
max?: number; // Maximum ball size in pixels
};
expansionRate?: number; // How fast balls expand (lower = slower)
velocityRange?: number; // Movement speed range (lower = slower)
colors?: string[]; // Color palette array (RGB format: "r, g, b," or hex: "#ffffff") // Visual Effects
effects?: {
glow?: boolean; // Enable glow effect around balls
trails?: boolean; // Enable motion trails
mouseInteraction?: boolean; // Enable mouse/touch interaction
};
}
`
#### 📚 Usage Examples
Basic Usage - Using Intensity Presets
tsx
import { ExpandingBalls } from "@innovista/ui";function HeroSection() {
return (
Dynamic Animated Backgrounds
Create stunning visual effects effortlessly
);
}
`
Simple Setup - Three Different Intensities
tsx
import { ExpandingBalls } from "@innovista/ui";// Subtle - Perfect for minimal designs
function SubtleExample() {
return (
Subtle and Smooth
);
}
// Normal - Balanced default
function NormalExample() {
return (
Perfect Balance
);
}
// Intense - Maximum visual impact
function IntenseExample() {
return (
Bold and Dynamic
);
}
`
Using Convenience Props
tsx
import { ExpandingBalls } from "@innovista/ui";function CustomExample() {
return (
speed={1.5}
count={50} // Override preset count
colors={[
"255, 107, 107,", // Red
"255, 159, 64,", // Orange
"255, 206, 84,", // Yellow
"75, 192, 192,", // Teal
"54, 162, 235,", // Blue
]}
>
Custom Colors and Count
);
}
`
Advanced Example with Custom Settings
tsx
import { ExpandingBalls } from "@innovista/ui";function AdvancedExample() {
return (
height="100vh"
backgroundColor="#000000"
speed={1.5}
intensity="intense"
advanced={{
count: 100,
size: { min: 5, max: 25 },
expansionRate: 0.12,
velocityRange: 5,
colors: [
"138, 43, 226,", // Blue Violet
"75, 0, 130,", // Indigo
"148, 0, 211,", // Dark Violet
],
effects: {
glow: true,
trails: true,
mouseInteraction: false,
},
}}
>
textAlign: "center",
color: "white",
padding: "2rem",
}}
>
Innovista UI
Next-level animations
With Mouse Interaction
tsx
import { ExpandingBalls } from "@innovista/ui";function InteractiveExample() {
return (
height="100vh"
backgroundColor="#0f0f23"
speed={1}
intensity="normal"
advanced={{
effects: {
glow: true,
trails: true,
mouseInteraction: true, // Enable mouse interaction
},
}}
>
Move your mouse to interact!
The balls will react to your cursor movement
);
}
`
Subtle Background Effect
tsx
import { ExpandingBalls } from "@innovista/ui";function SubtleBackground() {
return (
height="600px"
backgroundColor="#1a1a1a"
speed={0.8}
intensity="subtle"
advanced={{
expansionRate: 0.03, // Very slow expansion
velocityRange: 1.5, // Very slow movement
}}
>
Elegant Content Section
Subtle animations enhance without overwhelming
);
}
`
Next.js Integration
tsx
// app/page.tsx or pages/index.tsx
import { ExpandingBalls } from "@innovista/ui";export default function HomePage() {
return (
height="100vh"
backgroundColor="#0f0f23"
speed={1.2}
intensity="normal"
colors={[
"85, 221, 224,", // Cyan
"51, 101, 138,", // Blue
"246, 174, 45,", // Orange
]}
>
Next.js + Innovista UI
Beautiful animations out of the box
);
}
`
---
$3
> An animated background component featuring floating balls with connection lines. Create dynamic network visualizations with customizable colors, sizes, and interactive mouse effects.
💡 Pro Tip: Use the
prop to fine-tune the connection lines, ball colors, and enable mouse interaction for an interactive experience.
#### 📋 Props
| Prop | Type | Default | Description |
| ----------------- | ------------------------------- | --------------- | --------------------------------- |
|
width | string \| number \| "auto" | "auto" | Width of the component |
| height | string \| number \| "auto" | "auto" | Height of the component |
| backgroundColor | string | "transparent" | Background color |
| backgroundImage | string | undefined | Optional background image URL |
| speed | number \| string | 2 | Animation speed (higher = faster) |
| advanced | FloatingBallsAdvancedSettings | undefined | Advanced customization options |
| children | React.ReactNode | - | Content to display over animation |
📝 FloatingBallsAdvancedSettings Interface
`typescript
interface FloatingBallsAdvancedSettings {
colors?: string | { r: number; g: number; b: number }; // Ball colors (hex string or RGB object)
radius?: number | string; // Ball radius in pixels
count?: number | string; // Number of balls
max?: number | string; // Maximum number of balls
alphaFade?: number | string; // Alpha fade value for connections
linkLineWidth?: number | string; // Connection line width
connectionDistance?: number | string; // Maximum distance for connections
connectionColor?: string; // Connection line color
addMouseInteraction?: boolean; // Enable mouse/touch interaction
}
`
#### 📚 Usage Examples
Basic Usage
tsx
import { FloatingBalls } from "@innovista/ui";function HeroSection() {
return (
Network Visualization
Beautiful floating balls with connections
);
}
`
Advanced Example with Custom Settings
tsx
import { FloatingBalls } from "@innovista/ui";function AdvancedExample() {
return (
height="100vh"
backgroundColor="#1a1a2e"
speed={2}
advanced={{
colors: "#4e54c8",
radius: 3,
count: 50,
linkLineWidth: 1,
connectionDistance: 150,
connectionColor: "rgba(78, 84, 200, 0.3)",
addMouseInteraction: true,
}}
>
Interactive Network
Move your mouse to interact with the balls
);
}
`
With RGB Color Object
tsx
import { FloatingBalls } from "@innovista/ui";function RGBExample() {
return (
speed={1.5}
advanced={{
colors: { r: 255, g: 107, b: 107 }, // Red color
count: 60,
radius: 4,
connectionColor: "rgba(255, 107, 107, 0.4)",
}}
>
Custom RGB Colors
);
}
`
Next.js Integration
tsx
// app/page.tsx or pages/index.tsx
import { FloatingBalls } from "@innovista/ui";export default function HomePage() {
return (
height="100vh"
backgroundColor="#0f0f23"
speed={2}
advanced={{
colors: "#6366f1",
count: 40,
radius: 3,
addMouseInteraction: true,
}}
>
Next.js + Innovista UI
Beautiful network animations
);
}
`
---
$3
> A beautiful animated background component featuring floating particles with customizable opacity, scale, and blend modes. Perfect for creating elegant, subtle background effects.
💡 Pro Tip: Use the
prop to enable fade effects, scale animations, and blend modes for more sophisticated visual effects.
#### 📋 Props
| Prop | Type | Default | Description |
| ----------------- | ----------------------------------- | ----------- | --------------------------------- |
|
width | string \| number \| "auto" | "auto" | Width of the component |
| height | string \| number \| "auto" | "auto" | Height of the component |
| backgroundColor | string | "#021027" | Background color |
| backgroundImage | string | undefined | Optional background image URL |
| speed | number \| string | 1 | Animation speed (higher = faster) |
| advanced | FloatingParticlesAdvancedSettings | undefined | Advanced customization options |
| children | React.ReactNode | - | Content to display over animation |
📝 FloatingParticlesAdvancedSettings Interface
`typescript
interface FloatingParticlesAdvancedSettings {
count?: number | string; // Number of particles
size?: number | string; // Particle size in pixels
opacity?: number | string; // Particle opacity (0-1)
duration?: number | string; // Animation duration
delay?: number | string; // Animation delay
enableFade?: boolean; // Enable fade animation
enableScale?: boolean; // Enable scale animation
enableBlendMode?: boolean; // Enable blend mode
blendMode?: string; // CSS blend mode (e.g., "screen", "multiply")
scaleRange?: [number, number] | [string, string]; // Scale range [min, max]
fadeDuration?: number | string; // Fade animation duration
scaleDuration?: number | string; // Scale animation duration
enableBackgroundImage?: boolean; // Enable background image
enableMask?: boolean; // Enable mask effect
maskGradient?: string; // Mask gradient CSS
}
`
#### 📚 Usage Examples
Basic Usage
tsx
import { FloatingParticles } from "@innovista/ui";function HeroSection() {
return (
Elegant Particle Background
Subtle and beautiful animations
);
}
`
Advanced Example with Effects
tsx
import { FloatingParticles } from "@innovista/ui";function AdvancedExample() {
return (
height="100vh"
backgroundColor="#021027"
speed={1}
advanced={{
count: 50,
size: 3,
opacity: 0.8,
enableFade: true,
enableScale: true,
enableBlendMode: true,
blendMode: "screen",
scaleRange: [0.5, 1.5],
fadeDuration: 3,
scaleDuration: 4,
}}
>
Advanced Particle Effects
Fade and scale animations enabled
);
}
`
Subtle Background Effect
tsx
import { FloatingParticles } from "@innovista/ui";function SubtleBackground() {
return (
height="600px"
backgroundColor="#0a0a0a"
speed={0.8}
advanced={{
count: 30,
size: 2,
opacity: 0.4,
enableFade: true,
blendMode: "lighten",
}}
>
Subtle Particle Effect
Perfect for content sections
);
}
`
Next.js Integration
tsx
// app/page.tsx or pages/index.tsx
import { FloatingParticles } from "@innovista/ui";export default function HomePage() {
return (
height="100vh"
backgroundColor="#021027"
speed={1}
advanced={{
count: 40,
size: 3,
opacity: 0.7,
enableFade: true,
enableScale: true,
}}
>
Next.js + Innovista UI
Beautiful particle animations
);
}
`
---
$3
> An animated background component featuring floating squares with customizable colors, gradients, and random effects. Create modern, geometric visual experiences with smooth animations.
💡 Pro Tip: Enable gradient colors and random effects in the
prop to create more dynamic and varied visual patterns.
#### 📋 Props
| Prop | Type | Default | Description |
| ----------------- | --------------------------------- | ----------- | --------------------------------- |
|
width | string \| number \| "auto" | "auto" | Width of the component |
| height | string \| number \| "auto" | "auto" | Height of the component |
| backgroundColor | string | "#4e54c8" | Background color |
| backgroundImage | string | undefined | Optional background image URL |
| speed | number \| string | 1 | Animation speed (higher = faster) |
| advanced | FloatingSquaresAdvancedSettings | undefined | Advanced customization options |
| children | React.ReactNode | - | Content to display over animation |
📝 FloatingSquaresAdvancedSettings Interface
`typescript
interface FloatingSquaresAdvancedSettings {
count?: number | string; // Number of squares
color?: string; // Square color
duration?: number | string; // Animation duration
enableGradient?: boolean; // Enable gradient colors
gradientColor1?: string; // First gradient color
gradientColor2?: string; // Second gradient color
gradientDirection?: string; // Gradient direction (e.g., "to right", "45deg")
enableRandomSizes?: boolean; // Enable random square sizes
enableRandomDelays?: boolean; // Enable random animation delays
enableRandomPositions?: boolean; // Enable random starting positions
}
`
#### 📚 Usage Examples
Basic Usage
tsx
import { FloatingSquares } from "@innovista/ui";function HeroSection() {
return (
Geometric Background
Floating squares animation
);
}
`
Advanced Example with Gradient
tsx
import { FloatingSquares } from "@innovista/ui";function AdvancedExample() {
return (
height="100vh"
backgroundColor="#4e54c8"
speed={1}
advanced={{
count: 50,
color: "#ffffff",
duration: 20,
enableGradient: true,
gradientColor1: "#ff6b6b",
gradientColor2: "#4ecdc4",
gradientDirection: "45deg",
enableRandomSizes: true,
enableRandomDelays: true,
enableRandomPositions: true,
}}
>
Gradient Squares
Dynamic and colorful animations
);
}
`
Minimal Design
tsx
import { FloatingSquares } from "@innovista/ui";function MinimalExample() {
return (
height="600px"
backgroundColor="#1a1a2e"
speed={0.8}
advanced={{
count: 30,
color: "rgba(255, 255, 255, 0.1)",
enableRandomSizes: false,
enableRandomDelays: true,
}}
>
Minimal Floating Squares
Clean and elegant design
);
}
`
Next.js Integration
tsx
// app/page.tsx or pages/index.tsx
import { FloatingSquares } from "@innovista/ui";export default function HomePage() {
return (
height="100vh"
backgroundColor="#4e54c8"
speed={1}
advanced={{
count: 40,
enableGradient: true,
gradientColor1: "#667eea",
gradientColor2: "#764ba2",
enableRandomSizes: true,
enableRandomDelays: true,
}}
>
Next.js + Innovista UI
Beautiful square animations
);
}
`
---
$3
> An animated background component featuring dynamic geometric shapes (squares, circles, triangles, rectangles) with mouse interaction, particles, and gradient overlays. Create modern, interactive visual experiences with customizable shapes and colors.
💡 Pro Tip: Enable mouse interaction and particles in the
prop to create an interactive, engaging background that responds to user movement.
#### 📋 Props
| Prop | Type | Default | Description |
| ----------------- | ------------------------------------ | ----------- | --------------------------------- |
|
width | string \| number \| "auto" | "auto" | Width of the component |
| height | string \| number \| "auto" | "auto" | Height of the component |
| backgroundColor | string | "#1a1a2e" | Background color |
| backgroundImage | string | undefined | Optional background image URL |
| speed | number \| string | 1 | Animation speed (higher = faster) |
| advanced | GeometricAnimationAdvancedSettings | undefined | Advanced customization options |
| children | React.ReactNode | - | Content to display over animation |
📝 GeometricAnimationAdvancedSettings Interface
`typescript
interface GeometricAnimationAdvancedSettings {
count?: number | string; // Number of geometric shapes
types?: string[]; // Array of shape types: "square", "circle", "triangle", "rectangle"
colors?: string[]; // Array of color values (hex format)
enableMouseInteraction?: boolean; // Enable mouse/touch interaction (default: true)
mouseSensitivity?: number | string; // Mouse interaction sensitivity (default: 0.05)
enableParticles?: boolean; // Enable particle effects (default: true)
particleCount?: number | string; // Number of particles (default: 100)
enableGradientOverlay?: boolean; // Enable gradient overlay effect (default: true)
}
`
#### 📚 Usage Examples
Basic Usage
tsx
import { GeometricAnimation } from "@innovista/ui";function HeroSection() {
return (
Geometric Background
Dynamic shapes and particles
);
}
`
Advanced Example with Custom Settings
tsx
import { GeometricAnimation } from "@innovista/ui";function AdvancedExample() {
return (
height="100vh"
backgroundColor="#1a1a2e"
speed={1}
advanced={{
count: 50,
types: ["square", "circle", "triangle"],
colors: ["#f72585", "#4cc9f0", "#7209b7", "#4361ee"],
enableMouseInteraction: true,
mouseSensitivity: 0.08,
enableParticles: true,
particleCount: 150,
enableGradientOverlay: true,
}}
>
Interactive Geometric Shapes
Move your mouse to interact with the shapes
);
}
`
Custom Shape Types
tsx
import { GeometricAnimation } from "@innovista/ui";function CustomShapesExample() {
return (
speed={1.2}
advanced={{
count: 40,
types: ["circle", "triangle"], // Only circles and triangles
colors: ["#ff6b6b", "#4ecdc4", "#ffe66d"],
enableMouseInteraction: true,
}}
>
Custom Shape Selection
Only circles and triangles
);
}
`
Minimal Design Without Particles
tsx
import { GeometricAnimation } from "@innovista/ui";function MinimalExample() {
return (
height="600px"
backgroundColor="#1a1a2e"
speed={0.8}
advanced={{
count: 30,
enableParticles: false, // Disable particles
enableGradientOverlay: false, // Disable gradient
enableMouseInteraction: false, // Disable mouse interaction
}}
>
Minimal Geometric Design
Clean shapes without extra effects
);
}
`
Next.js Integration
tsx
// app/page.tsx or pages/index.tsx
import { GeometricAnimation } from "@innovista/ui";export default function HomePage() {
return (
height="100vh"
backgroundColor="#1a1a2e"
speed={1}
advanced={{
count: 45,
types: ["square", "circle", "triangle", "rectangle"],
colors: ["#6366f1", "#8b5cf6", "#ec4899", "#f59e0b"],
enableMouseInteraction: true,
enableParticles: true,
particleCount: 120,
}}
>
Next.js + Innovista UI
Beautiful geometric animations
);
}
`
---
$3
> An animated background component featuring smooth gradient sliders that create elegant, flowing color transitions. Perfect for modern, minimalist designs with customizable colors, angles, and opacity effects.
💡 Pro Tip: Use the
prop to customize the gradient angle, enable alternate animation direction, and control opacity for subtle or bold visual effects.
#### 📋 Props
| Prop | Type | Default | Description |
| ----------------- | --------------------------------- | ----------- | --------------------------------- |
|
width | string \| number \| "auto" | "auto" | Width of the component |
| height | string \| number \| "auto" | "auto" | Height of the component |
| backgroundColor | string | "#eee" | Background color |
| backgroundImage | string | undefined | Optional background image URL |
| speed | number \| string | 1 | Animation speed (higher = faster) |
| advanced | GradientSlidersAdvancedSettings | undefined | Advanced customization options |
| children | React.ReactNode | - | Content to display over animation |
📝 GradientSlidersAdvancedSettings Interface
`typescript
interface GradientSlidersAdvancedSettings {
count?: number | string; // Number of gradient sliders (default: 3)
colors?: string[]; // Array of color values (hex format, minimum 2 colors, default: ["#FFEFBA", "#FFFFFF"])
angle?: number | string; // Gradient angle in degrees (default: -60)
opacity?: number | string; // Opacity value 0-1 (default: 0.5)
duration?: number | string; // Animation duration in seconds (default: 3)
enableAlternate?: boolean; // Enable alternate animation direction (default: true)
enableOpacity?: boolean; // Enable opacity animation (default: true)
}
`
#### 📚 Usage Examples
Basic Usage
tsx
import { GradientSliders } from "@innovista/ui";function HeroSection() {
return (
Gradient Sliders
Elegant flowing gradients
);
}
`
Advanced Example with Custom Settings
tsx
import { GradientSliders } from "@innovista/ui";function AdvancedExample() {
return (
height="100vh"
backgroundColor="#f0f0f0"
speed={1}
advanced={{
count: 4,
colors: ["#667eea", "#764ba2", "#f093fb", "#4facfe"],
angle: 45,
opacity: 0.6,
duration: 4,
enableAlternate: true,
enableOpacity: true,
}}
>
Custom Gradient Sliders
Beautiful color transitions
);
}
`
Warm Color Palette
tsx
import { GradientSliders } from "@innovista/ui";function WarmColorsExample() {
return (
speed={0.8}
advanced={{
colors: ["#ff6b6b", "#ffa500", "#ffd700", "#ffefba"],
angle: -45,
opacity: 0.5,
count: 3,
}}
>
Warm Gradient Theme
Cozy and inviting colors
);
}
`
Cool Color Palette
tsx
import { GradientSliders } from "@innovista/ui";function CoolColorsExample() {
return (
speed={1.2}
advanced={{
colors: ["#4facfe", "#00f2fe", "#667eea", "#764ba2"],
angle: 60,
opacity: 0.7,
count: 5,
enableAlternate: true,
}}
>
Cool Gradient Theme
Calm and professional
);
}
`
Minimal Design
tsx
import { GradientSliders } from "@innovista/ui";function MinimalExample() {
return (
height="600px"
backgroundColor="#ffffff"
speed={0.6}
advanced={{
count: 2,
colors: ["#f0f0f0", "#ffffff"],
opacity: 0.3,
enableOpacity: false,
}}
>
Minimal Gradient Design
Subtle and elegant
);
}
`
Next.js Integration
tsx
// app/page.tsx or pages/index.tsx
import { GradientSliders } from "@innovista/ui";export default function HomePage() {
return (
height="100vh"
backgroundColor="#f5f5f5"
speed={1}
advanced={{
count: 3,
colors: ["#6366f1", "#8b5cf6", "#ec4899"],
angle: -60,
opacity: 0.5,
duration: 3,
enableAlternate: true,
enableOpacity: true,
}}
>
Next.js + Innovista UI
Beautiful gradient animations
);
}
`
---
$3
> An animated background component featuring a mesmerizing interstellar effect with stars, rings, and interactive mouse controls. Create space-themed visual experiences with customizable glow effects, pulse animations, and dynamic text overlays.
💡 Pro Tip: Enable mouse interaction, glow effects, and pulse animations in the
prop to create an immersive, interactive space experience that responds to user movement.
#### 📋 Props
| Prop | Type | Default | Description |
| ----------------- | ------------------------------ | ----------- | --------------------------------- |
|
width | string \| number \| "auto" | "auto" | Width of the component |
| height | string \| number \| "auto" | "auto" | Height of the component |
| backgroundColor | string | "#000000" | Background color |
| backgroundImage | string | undefined | Optional background image URL |
| speed | number \| string | 1 | Animation speed (higher = faster) |
| advanced | InterstellarAdvancedSettings | undefined | Advanced customization options |
| children | React.ReactNode | - | Content to display over animation |
📝 InterstellarAdvancedSettings Interface
`typescript
interface InterstellarAdvancedSettings {
ringCount?: number | string; // Number of rings (default: 35)
starCount?: number | string; // Number of stars (default: 150)
scale?: number | string; // Scale factor (default: 150)
spring?: number | string; // Spring physics value (default: 0.95)
friction?: number | string; // Friction value (default: 0.95)
text1?: string; // First text overlay
text2?: string; // Second text overlay
enableMouseInteraction?: boolean; // Enable mouse/touch interaction (default: true)
enableGlow?: boolean; // Enable glow effect (default: false)
glowIntensity?: number | string; // Glow intensity 0-1 (default: 0.3)
enablePulse?: boolean; // Enable pulse animation (default: false)
pulseSpeed?: number | string; // Pulse animation speed (default: 0.02)
}
`
#### 📚 Usage Examples
Basic Usage
tsx
import { Interstellar } from "@innovista/ui";function HeroSection() {
return (
Interstellar Experience
Journey through space
);
}
`
Advanced Example with All Effects
tsx
import { Interstellar } from "@innovista/ui";function AdvancedExample() {
return (
height="100vh"
backgroundColor="#000000"
speed={1}
advanced={{
ringCount: 40,
starCount: 200,
scale: 150,
spring: 0.95,
friction: 0.95,
text1: "Welcome",
text2: "To Space",
enableMouseInteraction: true,
enableGlow: true,
glowIntensity: 0.5,
enablePulse: true,
pulseSpeed: 0.03,
}}
>
Interactive Space Experience
Move your mouse to explore
);
}
`
With Glow Effect
tsx
import { Interstellar } from "@innovista/ui";function GlowExample() {
return (
speed={1.2}
advanced={{
ringCount: 30,
starCount: 180,
enableGlow: true,
glowIntensity: 0.6,
enableMouseInteraction: true,
}}
>
Glowing Space Effect
Enhanced visual appeal with glow
);
}
`
With Pulse Animation
tsx
import { Interstellar } from "@innovista/ui";function PulseExample() {
return (
speed={0.8}
advanced={{
ringCount: 35,
starCount: 150,
enablePulse: true,
pulseSpeed: 0.025,
enableMouseInteraction: false,
}}
>
Pulsing Space Animation
Rhythmic pulse effect
);
}
`
Minimal Design
tsx
import { Interstellar } from "@innovista/ui";function MinimalExample() {
return (
height="600px"
backgroundColor="#000000"
speed={0.6}
advanced={{
ringCount: 20,
starCount: 100,
enableMouseInteraction: false,
enableGlow: false,
enablePulse: false,
}}
>
Minimal Space Design
Clean and simple interstellar effect
);
}
`
Next.js Integration
tsx
// app/page.tsx or pages/index.tsx
import { Interstellar } from "@innovista/ui";export default function HomePage() {
return (
height="100vh"
backgroundColor="#000000"
speed={1}
advanced={{
ringCount: 35,
starCount: 150,
scale: 150,
enableMouseInteraction: true,
enableGlow: true,
glowIntensity: 0.4,
enablePulse: true,
pulseSpeed: 0.02,
}}
>
Next.js + Innovista UI
Beautiful interstellar animations
);
}
`
---
$3
> An animated background component featuring dynamic mathematical patterns generated using canvas. Create mesmerizing geometric visualizations with customizable grid sizes, pixel dimensions, color variations, and pattern centers.
💡 Pro Tip: Adjust the
, pixelSize, and colorVariation in the advanced prop to create different pattern densities and visual effects, from subtle textures to bold geometric designs.
#### 📋 Props
| Prop | Type | Default | Description |
| ----------------- | ----------------------------- | --------------- | --------------------------------- |
|
width | string \| number \| "auto" | "auto" | Width of the component |
| height | string \| number \| "auto" | "auto" | Height of the component |
| backgroundColor | string | "transparent" | Background color |
| speed | number \| string | 0.03 | Animation speed (higher = faster) |
| advanced | MathPatternAdvancedSettings | undefined | Advanced customization options |
| children | React.ReactNode | - | Content to display over animation |
📝 MathPatternAdvancedSettings Interface
`typescript
interface MathPatternAdvancedSettings {
gridSize?: number | string; // Grid size in pixels (default: 30)
pixelSize?: number | string; // Pixel size in pixels (default: 10)
centerX?: number | string; // Pattern center X coordinate (default: 100)
centerY?: number | string; // Pattern center Y coordinate (default: 100)
baseColor?: number | string; // Base color value 0-255 (default: 192)
colorVariation?: number | string; // Color variation range (default: 64)
}
`
#### 📚 Usage Examples
Basic Usage
tsx
import { MathPattern } from "@innovista/ui";function HeroSection() {
return (
Mathematical Patterns
Dynamic geometric visualizations
);
}
`
Advanced Example with Custom Settings
tsx
import { MathPattern } from "@innovista/ui";function AdvancedExample() {
return (
height="100vh"
backgroundColor="#0a0a0a"
speed={0.05}
advanced={{
gridSize: 40,
pixelSize: 12,
centerX: 150,
centerY: 150,
baseColor: 200,
colorVariation: 80,
}}
>
Custom Math Pattern
Fine-tuned geometric visualization
);
}
`
Dense Pattern
tsx
import { MathPattern } from "@innovista/ui";function DensePatternExample() {
return (
speed={0.04}
advanced={{
gridSize: 20, // Smaller grid = denser pattern
pixelSize: 8,
baseColor: 180,
colorVariation: 75,
}}
>
Dense Mathematical Pattern
Intricate geometric design
);
}
`
Sparse Pattern
tsx
import { MathPattern } from "@innovista/ui";function SparsePatternExample() {
return (
speed={0.02}
advanced={{
gridSize: 60, // Larger grid = sparser pattern
pixelSize: 15,
baseColor: 220,
colorVariation: 35,
}}
>
Subtle Math Pattern
Minimal geometric texture
);
}
`
High Contrast Pattern
tsx
import { MathPattern } from "@innovista/ui";function HighContrastExample() {
return (
speed={0.06}
advanced={{
gridSize: 35,
pixelSize: 11,
baseColor: 128,
colorVariation: 127, // Maximum variation for high contrast
}}
>
High Contrast Pattern
Bold geometric visualization
);
}
`
Next.js Integration
tsx
// app/page.tsx or pages/index.tsx
import { MathPattern } from "@innovista/ui";export default function HomePage() {
return (
height="100vh"
backgroundColor="#0a0a0a"
speed={0.03}
advanced={{
gridSize: 30,
pixelSize: 10,
centerX: 100,
centerY: 100,
baseColor: 192,
colorVariation: 64,
}}
>
Next.js + Innovista UI
Beautiful mathematical patterns
);
}
`
---
$3
> An animated background component featuring dynamic particles with connection lines. Create interactive network visualizations with customizable particle count, colors, sizes, and connection settings. Perfect for modern, tech-focused designs.
💡 Pro Tip: Use the
prop to customize particle appearance, enable/disable connections, and even use custom images as particles for unique visual effects.
#### 📋 Props
| Prop | Type | Default | Description |
| ----------------- | ---------------------------- | ----------- | --------------------------------- |
|
width | string \| number \| "auto" | "auto" | Width of the component |
| height | string \| number \| "auto" | "auto" | Height of the component |
| backgroundColor | string | "#2c3e50" | Background color |
| speed | number \| string | 2 | Animation speed (higher = faster) |
| advanced | ParticlesAdvancedSettings | undefined | Advanced customization options |
| children | React.ReactNode | - | Content to display over animation |
📝 ParticlesAdvancedSettings Interface
`typescript
interface ParticlesAdvancedSettings {
count?: number | string; // Number of particles (default: 30)
color?: string; // Particle color (hex format, default: "#e74c3c")
size?: number | string; // Particle size in pixels (default: 5)
opacity?: number | string; // Particle opacity 0-1 (default: 0.9)
connectionDistance?: number | string; // Maximum distance for connections (default: 150)
showConnections?: boolean; // Show connection lines between particles (default: true)
connectionColor?: string; // Connection line color (hex format, default: "#3498db")
connectionOpacity?: number | string; // Connection line opacity 0-1 (default: 0.8)
image?: string; // Optional image URL to use as particle shape
imageWidth?: number | string; // Image width in pixels (default: 20)
imageHeight?: number | string; // Image height in pixels (default: 20)
}
`
#### 📚 Usage Examples
Basic Usage
tsx
import { Particles } from "@innovista/ui";function HeroSection() {
return (
Particle Network
Dynamic connections and animations
);
}
`
Advanced Example with Custom Settings
tsx
import { Particles } from "@innovista/ui";function AdvancedExample() {
return (
height="100vh"
backgroundColor="#1a1a2e"
speed={2}
advanced={{
count: 50,
color: "#6366f1",
size: 6,
opacity: 0.9,
connectionDistance: 200,
showConnections: true,
connectionColor: "#8b5cf6",
connectionOpacity: 0.6,
}}
>
Custom Particle Network
Fine-tuned particle system
);
}
`
Without Connections
tsx
import { Particles } from "@innovista/ui";function NoConnectionsExample() {
return (
speed={1.5}
advanced={{
count: 40,
color: "#ff6b6b",
size: 4,
showConnections: false, // Disable connection lines
}}
>
Particles Only
No connection lines
);
}
`
With Custom Image Particles
function ImageParticlesExample() {
return (
speed={2}
advanced={{
count: 30,
image: "/path/to/particle-image.png",
imageWidth: 25,