Left: raw source code given to LLM. Right: AI descriptor JSON. Same prompt, same model.
```tsx
import React, { useState, useEffect } from 'react';
import Counter from './Counter'; // Assuming Counter.tsx is in the same directory
const Example: React.FC = () => {
const [currentValue, setCurrentValue] = useState(12345.67);
// Example of how to change the value over time or based on some event
useEffect(() => {
const interval = setInterval(() => {
// Increment or decrement the value for a dynamic example
setCurrentValue(prev => {
const newValue = prev + (Math.random() - 0.5) * 100; // Add/subtract a random amount
return parseFloat(newValue.toFixed(2)); // Keep it to 2 decimal places
});
}, 2000); // Change every 2 seconds
return () => clearInterval(interval);
}, []);
return (
<div
style={{
fontFamily: 'sans-serif',
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
minHeight: '100vh',
backgroundColor: '#282c34', // Dark background for contrast
color: '#f0f0f0', // Light text color
padding: '20px',
}}
>
<h1>Dynamic Counter Example</h1>
<p style={{ marginBottom: '40px', fontSize: '1.2em' }}>
This counter displays a value that updates every 2 seconds.
</p>
{/* Counter with sensible default props */}
<Counter
value={currentValue}
fontSize={80} // A good size for a display, smaller than the default 100
padding={8} // Add some vertical padding around the numbers
gap={12} // Increase gap between digits
borderRadius={8} // Slightly more rounded corners
horizontalPadding={16} // More horizontal padding inside the counter box
textColor="#00e676" // A vibrant green color for the digits
fontWeight="bold"
gradientFrom="rgba(40, 44, 52, 1)" // Match background for gradient
gradientTo="rgba(40, 44, 52, 0)"
gradientHeight={24} // Make gradients a bitimport React, { useState, useEffect } from 'react';
import Counter from './Counter'; // Assuming Counter.jsx is in the same directory
const Example = () => {
const [currentValue, setCurrentValue] = useState(0);
useEffect(() => {
// Simulate value changes over time for demonstration
const interval = setInterval(() => {
setCurrentValue(prev => {
// Increment up to 9999, then reset to 0
if (prev >= 9999) return 0;
return prev + Math.floor(Math.random() * 50) + 1; // Add a random increment
});
}, 2000); // Change value every 2 seconds
return () => clearInterval(interval);
}, []);
return (
<div
style={{
fontFamily: 'sans-serif',
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
minHeight: '100vh',
backgroundColor: '#282c34', // A dark background to see the gradients
color: 'white',
padding: '20px',
gap: '40px',
}}
>
<h1 style={{ marginBottom: '20px' }}>Animated Counter Examples</h1>
<div style={{ textAlign: 'center' }}>
<h2>Dynamic Counter</h2>
<p style={{ marginBottom: '20px' }}>Value: {currentValue}</p>
<Counter
value={currentValue}
fontSize={100}
gap={12}
textColor="lightblue"
fontWeight={800}
gradientHeight={24}
gradientFrom="#282c34" // Match background color
gradientTo="transparent"
horizontalPadding={16}
borderRadius={8}
/>
</div>
<div style={{ textAlign: 'center' }}>
<h2>Fixed Places Counter (e.g., a timer)</h2>
<p style={{ marginBottom: '20px' }}>Showing minutes and seconds (e.g., 01:23)</p>
<Counter
value={83} // Simulating 1 minute and 23 seconds
places={[100, 10, '.', 10, 1]} // Hundreds, Tens, Decimal, Tens, Ones to represent MM:SS
fontSize={72}
gap={10}
textColor="gold"
fontWeight={700}
gradientHeight={20}
gradientFrom="#282c34"
gradientTo="transparent"
/>
</div>
<div style={{ textAlign: 'center' }}>
<h2>Simple Counter (as per example in descriptor)</h2>
<Counter value={1234} fontSize={60} textColor="white" fontWeight={700} />
</div>
</div>
);
};
export default Example;import React, { useState } from 'react';
import Counter from './Counter'; // Assuming Counter.tsx is in the same directory
const Example: React.FC = () => {
const [currentValue, setCurrentValue] = useState(1234.56);
// You can change the value dynamically, for example, using a button or an interval
// For this example, let's just keep it static or add a simple way to change it.
// const increment = () => setCurrentValue(prev => prev + 1);
// const decrement = () => setCurrentValue(prev => prev - 1);
return (
<div style={{ padding: '20px', textAlign: 'center', backgroundColor: '#f0f0f0', minHeight: '100vh', display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center' }}>
<h1>Customized Counter Example</h1>
<Counter
value={currentValue}
fontSize={80} // Non-default value (default is 100)
padding={10} // Non-default value (default is 0)
gap={12} // Non-default value (default is 8)
// You can add more customizations here if needed
textColor="#333"
fontWeight="bold"
borderRadius={8}
horizontalPadding={16}
gradientFrom="rgba(240, 240, 240, 0.8)"
gradientTo="rgba(240, 240, 240, 0)"
/>
<p style={{ marginTop: '20px', fontSize: '1.2em' }}>Current Value: <strong>{currentValue}</strong></p>
{/* Example buttons to change value */}
{/* <div>
<button onClick={decrement} style={{ margin: '5px', padding: '10px 20px', fontSize: '1em' }}>- Decrement</button>
<button onClick={increment} style={{ margin: '5px', padding: '10px 20px', fontSize: '1em' }}>+ Increment</button>
</div> */}
</div>
);
};
export default Example;import React from 'react';
import Counter from './Counter'; // Assuming Counter.jsx or Counter.tsx is in the same directory
const Example = () => {
return (
<div style={{ background: '#333', padding: 20, borderRadius: 8 }}>
<Counter
value={12345}
fontSize={60} // Non-default value (default is 100)
padding={5} // Non-default value (default is 0)
gap={10} // Non-default value (default is 8)
textColor="white"
fontWeight={700}
gradientFrom="#333" // Match background for a seamless fade
/>
</div>
);
};
export default Example;```tsx
import React, { useEffect, useState } from 'react';
import Counter from './Counter'; // Assuming Counter.tsx is in the same directory
/**
* Example component demonstrating the use```jsx
import React from 'react';
import Counter from './Counter'; // Assuming Counter.jsx is in the same directory or correctly aliased
/**
* A dashboard section displaying key metrics usingimport CircularGallery from './CircularGallery'; // Assuming CircularGallery is in the same directory or correctly aliased
// Define the type for an item in the gallery
interface GalleryItem {
image: string;
text: string;
}
export default function Example() {
// Example content for the circular gallery
const exampleItems: GalleryItem[] = [
{ image: 'https://picsum.photos/id/1018/800/600?grayscale', text: 'Mountain View' },
{ image: 'https://picsum.photos/id/1015/800/600?grayscale', text: 'Macarons' },
{ image: 'https://picsum.photos/id/1020/800/600?grayscale', text: 'Forest Path' },
{ image: 'https://picsum.photos/id/1024/800/600?grayscale', text: 'Boat on Lake' },
{ image: 'https://picsum.photos/id/1031/800/600?grayscale', text: 'Desert Landscape' },
{ image: 'https://picsum.photos/id/1040/800/600?grayscale', text: 'Cherry Blossoms' },
{ image: 'https://picsum.photos/id/1043/800/600?grayscale', text: 'Bridge at Night' },
];
// Sensible default props - these largely align with CircularGallery's internal defaults
const galleryProps = {
items: exampleItems,
bend: 3, // A moderate bend for a circular effect
textColor: '#ffffff', // White text for titles
borderRadius: 0.05, // Slight rounding for image corners
font: 'bold 30px Figtree', // A readable and modern font
scrollSpeed: 2, // Default scroll speed
scrollEase: 0.05, // Default scroll easing
};
return (
<div className="w-screen h-screen bg-gray-900 flex items-center justify-center">
<h1 className="sr-only">Circular Image Gallery</h1> {/* Accessible title */}
{/* The CircularGallery component will fill its parent div */}
<CircularGallery {...galleryProps} />
</div>
);
}import React from 'react';
import CircularGallery from './CircularGallery'; // Assuming CircularGallery is in the same directory or a resolvable path
const exampleItems = [
{ image: 'https://picsum.photos/id/1018/600/400', text: 'Peaceful Lake' },
{ image: 'https://picsum.photos/id/1015/600/400', text: 'Desert Highway' },
{ image: 'https://picsum.photos/id/1024/600/400', text: 'Forest Path' },
{ image: 'https://picsum.photos/id/1025/600/400', text: 'Rocky Coast' },
{ image: 'https://picsum.photos/id/1028/600/400', text: 'Snowy Mountains' },
];
const Example = () => {
return (
<div style={{
height: '600px', // Explicit height is required for CircularGallery
position: 'relative', // position: relative is required
backgroundColor: '#282c34', // Adding a background for better contrast
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
flexDirection: 'column',
padding: '20px'
}}>
<h2 style={{ color: '#ffffff', marginBottom: '40px', fontFamily: 'sans-serif' }}>
Explore Our Circular Gallery
</h2>
<CircularGallery
items={exampleItems}
bend={3.5} // Slightly more curved than default
textColor="#a8dadc" // Custom text color
borderRadius={0.1} // Slightly more rounded
font="bold 28px sans-serif" // Custom font
scrollSpeed={2.5} // Slightly faster scroll
scrollEase={0.07} // Slightly less smooth deceleration
/>
</div>
);
};
export default Example;import CircularGallery from './CircularGallery'; // Assuming CircularGallery.tsx is in the same directory
export default function Example() {
// Optional: You can define custom items if you don't want the default ones
const customItems = [
{ image: 'https://picsum.photos/seed/10/800/600?grayscale', text: 'Mountain Peak' },
{ image: 'https://picsum.photos/seed/11/800/600?grayscale', text: 'Forest Path' },
{ image: 'https://picsum.photos/seed/12/800/600?grayscale', text: 'Cityscape at Night' },
{ image: 'https://picsum.photos/seed/13/800/600?grayscale', text: 'Ocean Sunset' },
{ image: 'https://picsum.photos/seed/14/800/600?grayscale', text: 'Desert Sands' },
];
return (
<div className="w-screen h-screen bg-gray-100 flex items-center justify-center">
<div className="w-full h-full max-w-4xl max-h-[600px] relative">
<CircularGallery
// Using custom items
// items={customItems}
// Setting bend to a non-default value (default is 3)
bend={10}
// Setting textColor to a non-default value (default is "#ffffff")
textColor="#FF0000" // Red color
// Setting borderRadius to a non-default value (default is 0.05)
borderRadius={0.15} // More rounded corners
// You can also customize font, scrollSpeed, scrollEase if needed
font="italic 25px Arial"
scrollSpeed={3}
/>
</div>
</div>
);
}import React from 'react';
import CircularGallery from './CircularGallery'; // Assuming CircularGallery is in the same directory or properly aliased
const Example = () => {
const customItems = [
{ image: 'https://via.placeholder.com/400x300/ff7f50/ffffff?text=Item+A', text: 'Vibrant Sunset' },
{ image: 'https://via.placeholder.com/400x300/87ceeb/ffffff?text=Item+B', text: 'Blue Horizon' },
{ image: 'https://via.placeholder.com/400x300/90ee90/ffffff?text=Item+C', text: 'Lush Greenery' },
{ image: 'https://via.placeholder.com/400x300/ffb6c1/ffffff?text=Item+D', text: 'Soft Pastels' },
{ image: 'https://via.placeholder.com/400x300/da70d6/ffffff?text=Item+E', text: 'Amethyst Dreams' },
];
return (
<div style={{ height: '600px', position: 'relative', background: '#333' }}>
<CircularGallery
items={customItems}
bend={5} // Non-default value (default is 3)
textColor="#a8dadc" // Non-default value (default is "#ffffff")
borderRadius={0.2} // Non-default value (default is 0.05)
/>
</div>
);
};
export default Example;Here's a React component, `Example`, that uses the `CircularGallery` component within a modern, dark-themed landing page section.
```tsx
import React from 'react';```jsx
import React from 'react';
import CircularGallery from './CircularGallery'; // Assuming CircularGallery.jsx is in the same directory
const Example = () => {
// Example data for the gallery items
const galleryItems = [
{ image: 'https://images.unsplash.com/photo-1542456336-e820c7849e79?auto=format&fit=crop&q=80&w=1974&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D', text: 'Stunning Landscapes' },
{ image: 'https://images.unsplash.com/photo-1510414936274-b77873b22b10?auto=format&fit=crop&q=80&w=1935&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D', text: 'Urban Exploration' },
{ image: 'https://images.unsplash.com/photo-1454496522488-7a84828e49ab?auto=format&fit=crop&q=80&w=2070&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D', text: 'Majestic Mountains' },
{ image: 'https://images.unsplash.com/photo-1502691523311-641577d46534?auto=format&fit=crop&q=80&w=1932&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D', text: 'Serene Oceans' },
{ image: 'https://images.unsplash.com/photo-1494253109117-86f19938e0dd?auto=format&fit=crop&q=80&w=2070&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D', text: 'Vibrant Cityscapes' },
{Here's an example React component `Example` that uses the `InfiniteMenu` component with some sample data and default props.
```tsx
import React from 'react';
import InfiniteMenu from './InfiniteMenu'; // Adjust the import path as necessary
// Define the MenuItem interface to match the InfiniteMenu's expectation
interface MenuItem {
image: string;
link: string;
title: string;
description: string;
}
const exampleItems: MenuItem[] = [
{
image: 'https://picsum.photos/id/1018/900/900',
link: 'https://unsplash.com/photos/yFKfBqJ1d-U',
title: 'Forest Path',
description: 'A serene path through a dense forest.'
},
{
image: 'https://picsum.photos/id/1020/900/900',
link: 'https://unsplash.com/photos/qC6z7pL3s-w',
title: 'Mountain Lake',
description: 'A calm lake nestled among majestic mountains.'
},
{
image: 'https://picsum.photos/id/1025/900/900',
link: 'https://unsplash.com/photos/jFCViYFYcus',
title: 'Desert Dunes',
description: 'Vast, rolling sand dunes under a clear sky.'
},
{
image: 'https://picsum.photos/id/1035/900/900',
link: 'https://unsplash.com/photos/z3fIq6e20C8',
title: 'City Lights',
description: 'The vibrant glow of a city at night.'
},
{
image: 'https://picsum.photos/id/1040/900/900',
link: 'https://unsplash.com/photos/e_S5Hge9m1E',
title: 'Ocean Sunset',
description: 'A breathtaking sunset over the open ocean.'
},
{
image: 'https://picsum.photos/id/1050/900/900',
link: 'https://unsplash.com/photos/m_F7B4R1d94',
title: 'Winter Cabin',
description: 'A cozy cabin in a snowy, quiet landscape.'
},
{
image: 'https://picsum.photos/id/1062/900/900',
link: 'https://unsplash.com/photos/V8NnJ1I9G20',
title: 'Tropical Beach',
description: 'White sands and clear waters of a tropical paradise.'
},
{
image: 'https://picsum.photos/id/1070/900/900',
link: 'https://unsplash.com/photos/3XvD9P064Rk',
title: 'Autumn Leaves',
description: 'Colorful foliage covering the ground in autumn.'
},
{
image: 'https://picsum.photos/id/1072/900/900',
link: 'https://unsplash.com/photos/8P7n9Fj-29M',
title: 'Starry Night',
description: 'A mesmerizing view of the night sky filled with stars.'
},
];
const Example: React.FC = () => {
return (
<div className="w-screen h-screen bg-gray-900 text-white flex items-center justify-center">
<div className="w-[80vw] h-[80vh] max-w-[1200px]import React from 'react';
import InfiniteMenu from './InfiniteMenu'; // Assuming InfiniteMenu.jsx or InfiniteMenu.tsx is in the same directory
const Example = () => {
const defaultItems = [
{
image: 'https://via.placeholder.com/150/FF5733/FFFFFF?text=Project+A',
link: '/projects/a',
title: 'Project Alpha',
description: 'Explore the innovative features of Project Alpha, pushing boundaries.',
},
{
image: 'https://via.placeholder.com/150/33FF57/FFFFFF?text=Service+B',
link: '/services/b',
title: 'Service Beta',
description: 'Discover how Service Beta can streamline your workflow and boost productivity.',
},
{
image: 'https://via.placeholder.com/150/3357FF/FFFFFF?text=Team+C',
link: '/about/team-c',
title: 'Team Gamma',
description: 'Meet the dedicated professionals behind Team Gamma, committed to excellence.',
},
{
image: 'https://via.placeholder.com/150/FF33F5/FFFFFF?text=Product+D',
link: '/products/d',
title: 'Product Delta',
description: 'Experience the cutting-edge technology of Product Delta for a better future.',
},
{
image: 'https://via.placeholder.com/150/57FF33/FFFFFF?text=Solution+E',
link: '/solutions/e',
title: 'Solution Epsilon',
description: 'Our comprehensive Solution Epsilon provides answers to complex challenges.',
},
];
return (
<div style={{ height: '600px', position: 'relative', width: '100%', background: '#000' }}>
<InfiniteMenu
items={defaultItems}
scale={1} // Using the default scale of 1
/>
</div>
);
};
export default Example;import React, { FC } from 'react';
import InfiniteMenu from './InfiniteMenu'; // Assuming InfiniteMenu.tsx is in the same directory
// Define the MenuItem type as it's used by InfiniteMenu
interface MenuItem {
image: string;
link: string;
title: string;
description: string;
}
const exampleItems: MenuItem[] = [
{
image: 'https://picsum.photos/id/10/900/900',
link: 'https://react.dev/',
title: 'React',
description: 'A JavaScript library for building user interfaces.'
},
{
image: 'https://picsum.photos/id/20/900/900',
link: 'https://www.typescriptlang.org/',
title: 'TypeScript',
description: 'JavaScript with syntax for types.'
},
{
image: 'https://picsum.photos/id/30/900/900',
link: 'https://nextjs.org/',
title: 'Next.js',
description: 'The React Framework for Production.'
},
{
image: 'https://picsum.photos/id/40/900/900',
link: 'https://tailwindcss.com/',
title: 'Tailwind CSS',
description: 'A utility-first CSS framework for rapid UI development.'
},
{
image: 'https://picsum.photos/id/50/900/900',
link: 'https://webgl2fundamentals.org/',
title: 'WebGL 2',
description: 'Modern 3D graphics on the web.'
},
{
image: 'https://picsum.photos/id/60/900/900',
link: 'https://github.com/toji/gl-matrix',
title: 'gl-matrix',
description: 'Javascript Matrix and Vector library for High Performance WebGL apps.'
},
];
const Example: FC = () => {
return (
<div className="relative w-full h-screen bg-gray-900 text-white flex items-center justify-center">
<h1 className="absolute top-4 left-4 text-3xl font-bold z-20">Infinite Menu Example</h1>
<InfiniteMenu items={exampleItems} scale={0.8} />
</div>
);
};
export default Example;import React from 'react';
import InfiniteMenu from './InfiniteMenu'; // Assuming InfiniteMenu is in the same directory or properly aliased
const Example = () => {
const menuItems = [
{
image: 'https://picsum.photos/id/1018/200/200',
link: '/explore/forests',
title: 'Ancient Forests',
description: 'Discover the untouched beauty of ancient forests and their diverse ecosystems.',
},
{
image: 'https://picsum.photos/id/10/200/200',
link: '/explore/mountains',
title: 'Majestic Mountains',
description: 'Journey to the peaks of the world\'s most breathtaking mountain ranges.',
},
{
image: 'https://picsum.photos/id/1025/200/200',
link: '/explore/oceans',
title: 'Deep Blue Oceans',
description: 'Dive into the mysterious depths of the ocean and its vibrant marine life.',
},
{
image: 'https://picsum.photos/id/1040/200/200',
link: '/explore/deserts',
title: 'Vast Deserts',
description: 'Experience the stark beauty and unique challenges of desert landscapes.',
},
{
image: 'https://picsum.photos/id/1051/200/200',
link: '/explore/cities',
title: 'Vibrant Cities',
description: 'Explore the bustling streets and iconic landmarks of global metropolises.',
},
{
image: 'https://picsum.photos/id/106/200/200',
link: '/explore/aurora',
title: 'Aurora Borealis',
description: 'Witness the ethereal glow of the Northern Lights in their full splendor.',
},
];
return (
<div style={{ height: '700px', position: 'relative', width: '100%' }}>
<InfiniteMenu
items={menuItems}
scale={1.2} // Setting scale to a non-default value (default is 1)
/>
</div>
);
};
export default Example;```tsx
import React, { FC, useMemo } from 'react';
import InfiniteMenu from './InfiniteMenu'; // Assuming InfiniteMenu is in the same directory or accessible via path
// The```jsx
import React from 'react';
import InfiniteMenu from './InfiniteMenu'; // Assuming InfiniteMenu is in the same directory or a resolvable path
const Example = () => {import React from 'react';
import SoftAurora from './SoftAurora'; // Adjust the path if SoftAurora.tsx is in a different location
const Example: React.FC = () => {
return (
<div className="relative w-screen h-screen overflow-hidden flex items-center justify-center bg-gray-900">
{/* SoftAurora component as a background */}
<div className="absolute inset-0 z-0">
<SoftAurora
speed={0.8}
scale={2.0}
brightness={1.2}
color1="#add8e6" // Light blue
color2="#dda0dd" // Plum
noiseFrequency={2.0}
noiseAmplitude={0.8}
bandHeight={0.6}
bandSpread={1.2}
octaveDecay={0.2}
layerOffset={0.5}
colorSpeed={0.8}
enableMouseInteraction={true}
mouseInfluence={0.3}
/>
</div>
{/* Example content overlaying the aurora */}
<div className="relative z-10 text-white text-center p-8 bg-black bg-opacity-40 rounded-lg shadow-xl max-w-2xl mx-auto">
<h1 className="text-5xl font-bold mb-4">Welcome to the Aurora!</h1>
<p className="text-xl mb-6">
This is an example of the `SoftAurora` component in action. Hover your mouse over the background to interact with the lights!
</p>
<button className="px-6 py-3 bg-indigo-600 hover:bg-indigo-700 rounded-md text-lg font-semibold transition-colors duration-200">
Explore More
</button>
</div>
</div>
);
};
export default Example;import React from 'react';
import SoftAurora from './SoftAurora'; // Assuming SoftAurora.jsx is in the same directory
function Example() {
return (
<div className="relative w-full h-screen overflow-hidden flex items-center justify-center">
{/* SoftAurora component filling the background */}
<SoftAurora
// Props set to their default values for clarity
speed={0.6}
scale={1.5}
brightness={1}
color1="#f7f7f7"
color2="#e100ff"
noiseFrequency={2.5}
noiseAmplitude={1}
bandHeight={0.5}
bandSpread={1}
octaveDecay={0.1}
layerOffset={0}
colorSpeed={1}
enableMouseInteraction={true}
mouseInfluence={0.25}
/>
{/* Example content to display over the aurora */}
<div className="relative z-10 text-center text-white p-8 bg-black bg-opacity-30 rounded-lg max-w-2xl mx-auto">
<h1 className="text-5xl font-bold mb-4">Welcome to the Aurora!</h1>
<p className="text-xl mb-6">
This is an example of the SoftAurora component in action, creating a
dynamic and interactive background effect.
</p>
<p className="text-lg">
Try moving your mouse around to see the interactive distortion!
You can customize colors, speed, and other properties through the component's props.
</p>
</div>
</div>
);
}
export default Example;import SoftAurora from './SoftAurora'; // Assuming SoftAurora.tsx is in the same directory
export default function Example() {
return (
<div style={{ width: '100vw', height: '100vh', display: 'flex', justifyContent: 'center', alignItems: 'center', background: '#000' }}>
<SoftAurora
speed={0.3} // Custom speed (default is 0.6)
scale={2.0} // Custom scale (default is 1.5)
brightness={1.5} // Custom brightness (default is 1.0)
color1="#add8e6" // Optional: Add custom colors
color2="#8a2be2"
enableMouseInteraction={true} // Keep mouse interaction enabled
mouseInfluence={0.5} // Increase mouse influence
/>
</div>
);
}import React from 'react';
import SoftAurora from './SoftAurora'; // Assuming SoftAurora.jsx is in the same directory or adjust path
const Example = () => {
return (
<div style={{ width: '100%', height: '500px', background: '#000' }}>
<SoftAurora
speed={0.8} // Non-default value (default is 0.6)
scale={2.0} // Non-default value (default is 1.5)
brightness={1.5} // Non-default value (default is 1)
color1="#f7f7f7"
color2="#e100ff"
enableMouseInteraction={true} // Keeping default true or explicitly setting for clarity
/>
</div>
);
};
export default Example;Here's a React component, `Example`, that uses the `SoftAurora` component to create an engaging background for a hero section on a landing page, styled with Tailwind CSS.
```import React from 'react';
import SoftAurora from './SoftAurora'; // Assuming SoftAurora.jsx is in the same directory
const Example = () => {
return (
<div className="relative min-h-screen bg-gray-950 text-white overflow-hidden flex items-center justify-center p-4 sm:p-8">
{/* SoftAurora Background */}
<div className="absolute inset-0 z-0">
<SoftAurora
color1="#00e676" // Vibrant green
color2="#3f51b5" // Deep blue
speed={0.7}
scale={1.8}
brightness={1.1}
noiseFrequency={2.8}
bandHeight={0.6}
enableMouseInteraction={true}
mouseInfluence={0.3}
layerOffset={0.2}
colorSpeed={1.2}
/>
</div>
{/* Content Overlay */}
<div className="relative z-10 max-w-4xl mx-auto text-center bg-gray-900 bg-opacity-70 backdrop-blur-sm p-6 sm:p-10 rounded-xl shadow-2xl border border-gray-700">
<h1 className="text-4xl sm:text-6xl font-extrabold mb-4 leading-tight">
Experience the Aurora
</h1>
<p className="text-lg sm:text-xl text-gray-300 mb-8 max-w-2xl mx-auto">
Immerse yourself in a captivating display of light and color, crafted with stunning WebGL effects.
Witness the dynamic beauty of our SoftAurora background.
</p>
<div className="flex flex-col sm:flex-row justify-center gap-4">
<button className="px-8 py-3 bg-gradient-to-r from-emerald-500 to-teal-600 text-white font-semibold rounded-full shadow-lg hover:from-emerald-600 hover:to-teal-700 transition-all duration-300 ease-in-out transform hover:scale-105">
Discover More
</button>
<button className="px-8 py-3 border border-gray-400 text-gray-300 font-semibold rounded-full shadow-lg hover:bg-gray-800 hover:border-gray-300 transition-all duration-300 ease-in-out transform hover:scale-105">
Get Started
</button>
</div>
<p className="text-sm text-gray-400 mt-10">
*Move your mouse around to interact with the aurora effect!
</p>
</div>
</div>
);
};
export default Example;import React, { FC } from 'react';
import ModelViewer from './ModelViewer'; // Adjust the import path as needed
const Example: FC = () => {
const modelUrl = 'https://models.readyplayer.me/651f8a7e0a6d593006d91f27.glb'; // A sample GLB model URL
return (
<div className="flex flex-col items-center justify-center min-h-screen bg-gray-100 p-4">
<h1 className="text-3xl font-bold mb-8 text-gray-800">3D Model Viewer Example</h1>
<div className="w-full max-w-4xl bg-white shadow-lg rounded-lg overflow-hidden">
<ModelViewer
url={modelUrl}
width="100%"
height="600px" // Set a fixed height or use a responsive approach
autoFrame={true} // Automatically frames the model
autoRotate={true} // Model will slowly auto-rotate
autoRotateSpeed={0.5}
enableManualRotation={true} // Allow user to rotate manually
enableManualZoom={true} // Allow user to zoom manually
enableMouseParallax={true} // Adds a subtle parallax effect based on mouse movement
environmentPreset="studio" // Use a studio lighting environment
ambientIntensity={0.5} // Increase ambient light
keyLightIntensity={1.5} // Stronger key light
defaultRotationX={-45} // Start with a slightly different initial rotation
defaultRotationY={30}
defaultZoom={0.8} // Slightly zoomed in initially
minZoomDistance={0.5}
maxZoomDistance={5}
fadeIn={true} // Fade in the model on load
placeholderSrc="https://via.placeholder.com/128x128.png?text=Loading..." // Optional placeholder image
showScreenshotButton={true}
onModelLoaded={() => console.log('Model has finished loading!')}
/>
</div>
<p className="mt-8 text-gray-600 text-center">
This is an example of the `ModelViewer` component in action.
You can interact with the model by dragging to rotate and using the scroll wheel to zoom (on desktop).
</p>
</div>
);
};
export default Example;import React from 'react';
import ModelViewer from './ModelViewer'; // Assuming ModelViewer is in the same directory or accessible
const Example = () => {
return (
<div style={{ maxWidth: '800px', margin: 'auto', textAlign: 'center', padding: '20px' }}>
<h1>My 3D Product Showcase</h1>
<p>
Check out this amazing 3D model with interactive features! You can drag to rotate, scroll to zoom,
and even capture a screenshot.
</p>
{/* ModelViewer component with sensible defaults and a few custom settings */}
<ModelViewer
url="/models/teapot.glb" // Replace with a valid URL to your 3D model
width={700}
height={500}
environmentPreset="studio" // Change lighting to a studio setting
autoRotate={true} // Enable continuous rotation
autoRotateSpeed={0.4} // Set a moderate auto-rotation speed
fadeIn={true} // Fade in the model after loading
enableMouseParallax={true} // Keep subtle camera movement
enableHoverRotation={true} // Keep hover rotation effect
showScreenshotButton={true} // Show the screenshot button
defaultZoom={0.7} // Adjust initial zoom
onModelLoaded={() => console.log('Model has finished loading!')}
/>
<p style={{ marginTop: '20px' }}>
This viewer supports glTF/GLB, FBX, and OBJ formats. Experiment with different props
to customize the interaction and lighting.
</p>
</div>
);
};
export default Example;import React from 'react';
import ModelViewer from './ModelViewer'; // Adjust the path if your ModelViewer component is in a different location
const Example: React.FC = () => {
const modelUrl = "https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/DamagedHelmet/glTF/DamagedHelmet.gltf";
return (
<div className="flex justify-center items-center h-screen bg-gray-100">
<ModelViewer
url={modelUrl}
width={800} // Custom width (default is 400)
height={600} // Custom height (default is 400)
modelXOffset={0.5} // Custom modelXOffset (default is 0)
// Other props can be set or left at their defaults
enableManualRotation={true}
enableManualZoom={true}
environmentPreset="studio"
autoRotate={true}
autoRotateSpeed={0.5}
fadeIn={true}
onModelLoaded={() => console.log('Model loaded!')}
/>
</div>
);
};
export default Example;import React from 'react';
import ModelViewer from './ModelViewer'; // Assuming ModelViewer is in the same directory or properly aliased
const Example = () => {
return (
<div style={{ width: '100%', height: '100vh', display: 'flex', justifyContent: 'center', alignItems: 'center', backgroundColor: '#f0f0f0' }}>
<ModelViewer
url="https://modelviewer.dev/shared-assets/models/Astronaut.glb" // Placeholder URL, replace with your actual model URL
width={600} // Non-default value
height={500} // Non-default value
modelXOffset={50} // Non-default value
environmentPreset="studio"
enableMouseParallax
enableHoverRotation
/>
</div>
);
};
export default Example;```tsx
import React, { FC, useState } from 'react';
import ModelViewer, { ViewerProps } from './ModelViewer'; // Assuming ModelViewer.tsx is in the same directory```jsx
import React, { useState } from 'react';
import ModelViewer from './ModelViewer'; // Adjust path as needed
/**
* A product detail page showcasing a 3Dimport React from 'react';
import ShapeGrid from './ShapeGrid'; // Assuming ShapeGrid.tsx is in the same directory
const Example: React.FC = () => {
return (
<div className="min-h-screen bg-gray-900 text-gray-100 flex flex-col">
<header className="py-8 px-6 text-center">
<h1 className="text-4xl font-bold text-teal-400 mb-2">Welcome to the ShapeGrid Showcase</h1>
<p className="text-xl text-gray-300">Experience dynamic backgrounds with interactive shapes.</p>
</header>
<main className="flex-grow flex flex-col items-center justify-center p-6 relative">
{/* ShapeGrid as a background element */}
<div className="absolute inset-0 z-0">
<ShapeGrid
direction="diagonal"
speed={0.5}
borderColor="#555"
squareSize={30}
hoverFillColor="#f00"
shape="hexagon"
hoverTrailAmount={5}
/>
</div>
{/* Content overlaid on the ShapeGrid */}
<div className="relative z-10 p-8 bg-white bg-opacity-10 rounded-lg shadow-xl max-w-2xl text-center">
<h2 className="text-3xl font-semibold text-white mb-4">Interactive Canvas Background</h2>
<p className="text-lg text-gray-200 mb-6">
This section uses the <code className="bg-gray-700 px-1 py-0.5 rounded">ShapeGrid</code> component
as a mesmerizing background. Move your mouse over the grid to see the hover effects!
We've customized it to show hexagons moving diagonally with a red hover trail.
</p>
<div className="flex justify-center space-x-4">
<button className="px-6 py-3 bg-teal-600 text-white rounded-md hover:bg-teal-700 transition duration-300">
Learn More
</button>
<button className="px-6 py-3 bg-purple-600 text-white rounded-md hover:bg-purple-700 transition duration-300">
Get Started
</button>
</div>
</div>
</main>
<footer className="py-4 px-6 text-center text-gray-400 text-sm mt-8">
<p>© 2023 ShapeGrid Demo. All rights reserved.</p>
</footer>
</div>
);
};
export default Example;import React from 'react';
import ShapeGrid from './ShapeGrid'; // Assuming ShapeGrid is in the same directory or a resolvable path
const Example = () => {
return (
<div
style={{
width: '100%',
height: '500px', // ShapeGrid fills its parent, so define parent dimensions
position: 'relative', // Needed if content overlays ShapeGrid
overflow: 'hidden', // Ensures grid doesn't bleed out if content is larger
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
color: 'white',
fontSize: '2rem',
textAlign: 'center',
fontFamily: 'sans-serif',
}}
>
<ShapeGrid
direction="up"
speed={1}
borderColor="#777"
squareSize={45}
hoverFillColor="#007bff"
shape="circle"
hoverTrailAmount={3}
/>
<div style={{ position: 'absolute', zIndex: 1, padding: '20px', background: 'rgba(0,0,0,0.5)', borderRadius: '10px' }}>
<h1>Welcome to the ShapeGrid Example!</h1>
<p>Hover your mouse over the background to see the circle shapes light up.</p>
<p>The grid is animating upwards with a subtle trail effect.</p>
</div>
</div>
);
};
export default Example;import React from 'react';
import ShapeGrid from './ShapeGrid'; // Assuming ShapeGrid.tsx is in the same directory
const Example: React.FC = () => {
return (
<div style={{ width: '100%', height: '500px', backgroundColor: '#000' }}>
<ShapeGrid
direction="diagonal" // Non-default value
speed={2} // Non-default value
borderColor="blue" // Non-default value
hoverFillColor="purple" // Adding another non-default prop for visual interest
squareSize={50} // Another prop for visual variation
shape="circle" // Another prop for visual variation
hoverTrailAmount={5}
/>
</div>
);
};
export default Example;import React from 'react';
import ShapeGrid from './ShapeGrid'; // Assuming ShapeGrid is in the same directory or properly aliased
const Example = () => {
return (
<div style={{ width: '100%', height: '400px', background: '#000', position: 'relative' }}>
<ShapeGrid
direction="up"
speed={2}
borderColor="#00bcd4"
/>
</div>
);
};
export default Example;```tsx
import React from 'react';
import ShapeGrid from './ShapeGrid'; // Assuming ShapeGrid.tsx is in the same directory
const Example: React.FC = () => {
return (
<section className="relative h-screen w-full flex items-center justify-center bg-gray-950 text-white overflow-hidden">
{/* ShapeGrid as background */}
<div className="absolute inset-0 z-0">
<ShapeGrid
direction="diagonal"
speed={0.7}
borderColor="rgba(255, 255, 255, 0.05)" // Subtle white border
squareSize={70} // Larger shapes
hoverFillColor="#6366f1" // A vibrant indigo on hover
shape="hexagon" // Hexagon shapes
hoverTrailAmount={8} // A subtle trail
/>
</div>
{/* Content overlay */}
<div className="relative z-10 text-center p-8 max-w-4xl mx-auto bg-gray-900/50 backdrop-blur-sm rounded-lg shadow-2xl border border-gray-800">
<h1 className="text-5xl md:text-6xl font-extrabold mb-4 leading-tight text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-indigo-600">
Unleash Your Creativity
</h1>
<p className="text-xl md:text-2xl text-gray-300 mb-8 max-w-2xl mx-auto">
Experience dynamic visual interfaces that react to your touch,
creating engaging and interactive web experiences.
</p>
<div className="flex flex-col sm:flex-row gap-4 justify-center">
<button```jsx
import React from 'react';
import ShapeGrid from './ShapeGrid'; // Assuming ShapeGrid is in the same directory or accessible via path/alias
const Example = () =>