220 lines
7.8 KiB
TypeScript
220 lines
7.8 KiB
TypeScript
import { Box, Heading, VStack, Text, SimpleGrid } from '@chakra-ui/react'
|
|
import CyclingImage from './CyclingImage'
|
|
|
|
/**
|
|
* Demo component showcasing various configurations of CyclingImage
|
|
* This demonstrates the different ways to use the cycling animation effect
|
|
*/
|
|
function CyclingImageDemo() {
|
|
return (
|
|
<Box p={8} bg="gray.50" minH="100vh">
|
|
<VStack gap={8} align="stretch">
|
|
<Box textAlign="center">
|
|
<Heading size="2xl" mb={2}>CyclingImage Component Demo</Heading>
|
|
<Text color="gray.600">
|
|
Showcasing continuous light-to-dark color cycling animations
|
|
</Text>
|
|
</Box>
|
|
|
|
<SimpleGrid columns={{ base: 1, md: 2 }} gap={8}>
|
|
{/* Example 1: Default Settings */}
|
|
<Box bg="white" p={6} borderRadius="lg" shadow="md">
|
|
<Heading size="md" mb={4}>Default Settings</Heading>
|
|
<Text fontSize="sm" color="gray.600" mb={4}>
|
|
3s cycle, 50% intensity, auto-start
|
|
</Text>
|
|
<Box position="relative" h="300px" bg="gray.100" borderRadius="md">
|
|
<CyclingImage
|
|
src="/images/new/threehightext.webp"
|
|
position="absolute"
|
|
w="200px"
|
|
left="50%"
|
|
top="50%"
|
|
style={{ transform: 'translate(-50%, -50%)' } as any}
|
|
/>
|
|
</Box>
|
|
</Box>
|
|
|
|
{/* Example 2: With Controls */}
|
|
<Box bg="white" p={6} borderRadius="lg" shadow="md">
|
|
<Heading size="md" mb={4}>With Interactive Controls</Heading>
|
|
<Text fontSize="sm" color="gray.600" mb={4}>
|
|
Adjustable speed and intensity
|
|
</Text>
|
|
<Box position="relative" h="300px" bg="gray.100" borderRadius="md">
|
|
<CyclingImage
|
|
src="/images/new/fattext.webp"
|
|
position="absolute"
|
|
w="200px"
|
|
left="50%"
|
|
top="50%"
|
|
style={{ transform: 'translate(-50%, -50%)' } as any}
|
|
showControls={true}
|
|
cycleDuration={4}
|
|
intensity={0.7}
|
|
/>
|
|
</Box>
|
|
</Box>
|
|
|
|
{/* Example 3: Fast Cycle */}
|
|
<Box bg="white" p={6} borderRadius="lg" shadow="md">
|
|
<Heading size="md" mb={4}>Fast Cycle (1s)</Heading>
|
|
<Text fontSize="sm" color="gray.600" mb={4}>
|
|
Quick pulsing effect with high intensity
|
|
</Text>
|
|
<Box position="relative" h="300px" bg="gray.100" borderRadius="md">
|
|
<CyclingImage
|
|
src="/images/new/centerfattext.webp"
|
|
position="absolute"
|
|
w="200px"
|
|
left="50%"
|
|
top="50%"
|
|
style={{ transform: 'translate(-50%, -50%)' } as any}
|
|
cycleDuration={1}
|
|
intensity={0.8}
|
|
/>
|
|
</Box>
|
|
</Box>
|
|
|
|
{/* Example 4: Slow & Subtle */}
|
|
<Box bg="white" p={6} borderRadius="lg" shadow="md">
|
|
<Heading size="md" mb={4}>Slow & Subtle (8s)</Heading>
|
|
<Text fontSize="sm" color="gray.600" mb={4}>
|
|
Gentle breathing effect with low intensity
|
|
</Text>
|
|
<Box position="relative" h="300px" bg="gray.100" borderRadius="md">
|
|
<CyclingImage
|
|
src="/images/new/hairlosstext.webp"
|
|
position="absolute"
|
|
w="200px"
|
|
left="50%"
|
|
top="50%"
|
|
style={{ transform: 'translate(-50%, -50%)' } as any}
|
|
cycleDuration={8}
|
|
intensity={0.3}
|
|
timingFunction="linear"
|
|
/>
|
|
</Box>
|
|
</Box>
|
|
|
|
{/* Example 5: Paused by Default */}
|
|
<Box bg="white" p={6} borderRadius="lg" shadow="md">
|
|
<Heading size="md" mb={4}>Paused by Default</Heading>
|
|
<Text fontSize="sm" color="gray.600" mb={4}>
|
|
Animation starts paused, with controls
|
|
</Text>
|
|
<Box position="relative" h="300px" bg="gray.100" borderRadius="md">
|
|
<CyclingImage
|
|
src="/images/new/threehightext.webp"
|
|
position="absolute"
|
|
w="200px"
|
|
left="50%"
|
|
top="50%"
|
|
style={{ transform: 'translate(-50%, -50%)' } as any}
|
|
showControls={true}
|
|
autoStart={false}
|
|
cycleDuration={3}
|
|
intensity={0.6}
|
|
/>
|
|
</Box>
|
|
</Box>
|
|
|
|
{/* Example 6: Custom Timing Function */}
|
|
<Box bg="white" p={6} borderRadius="lg" shadow="md">
|
|
<Heading size="md" mb={4}>Ease-In-Out-Back</Heading>
|
|
<Text fontSize="sm" color="gray.600" mb={4}>
|
|
Custom cubic-bezier timing function
|
|
</Text>
|
|
<Box position="relative" h="300px" bg="gray.100" borderRadius="md">
|
|
<CyclingImage
|
|
src="/images/new/fattext.webp"
|
|
position="absolute"
|
|
w="200px"
|
|
left="50%"
|
|
top="50%"
|
|
style={{ transform: 'translate(-50%, -50%)' } as any}
|
|
cycleDuration={5}
|
|
intensity={0.7}
|
|
timingFunction="cubic-bezier(0.68, -0.55, 0.265, 1.55)"
|
|
/>
|
|
</Box>
|
|
</Box>
|
|
</SimpleGrid>
|
|
|
|
{/* Features List */}
|
|
<Box bg="white" p={6} borderRadius="lg" shadow="md">
|
|
<Heading size="md" mb={4}>Component Features</Heading>
|
|
<VStack align="start" gap={2}>
|
|
<Text>✅ Smooth continuous light-to-dark cycling animation</Text>
|
|
<Text>✅ Fully responsive with all Chakra UI responsive props</Text>
|
|
<Text>✅ Maintains absolute/relative positioning</Text>
|
|
<Text>✅ Customizable cycle duration (0.5s - 10s+)</Text>
|
|
<Text>✅ Adjustable intensity (0-100%)</Text>
|
|
<Text>✅ Multiple timing functions (ease, linear, cubic-bezier)</Text>
|
|
<Text>✅ Play/Pause controls (optional)</Text>
|
|
<Text>✅ Real-time speed adjustment</Text>
|
|
<Text>✅ Real-time intensity adjustment</Text>
|
|
<Text>✅ Auto-start or paused initial state</Text>
|
|
<Text>✅ CSS-based animations (hardware accelerated)</Text>
|
|
<Text>✅ Minimal performance impact</Text>
|
|
</VStack>
|
|
</Box>
|
|
|
|
{/* Usage Examples */}
|
|
<Box bg="white" p={6} borderRadius="lg" shadow="md">
|
|
<Heading size="md" mb={4}>Usage Examples</Heading>
|
|
<VStack align="start" gap={4}>
|
|
<Box>
|
|
<Text fontWeight="bold" mb={2}>Basic Usage:</Text>
|
|
<Box as="pre" bg="gray.100" p={3} borderRadius="md" fontSize="sm" overflowX="auto">
|
|
{`<CyclingImage
|
|
src="/path/to/image.png"
|
|
position="absolute"
|
|
w="200px"
|
|
left="50px"
|
|
top="100px"
|
|
/>`}
|
|
</Box>
|
|
</Box>
|
|
|
|
<Box>
|
|
<Text fontWeight="bold" mb={2}>With Custom Settings:</Text>
|
|
<Box as="pre" bg="gray.100" p={3} borderRadius="md" fontSize="sm" overflowX="auto">
|
|
{`<CyclingImage
|
|
src="/path/to/image.png"
|
|
position="absolute"
|
|
w={{ base: "100px", lg: "200px" }}
|
|
left={{ base: "20px", lg: "50px" }}
|
|
top="100px"
|
|
cycleDuration={5}
|
|
intensity={0.7}
|
|
timingFunction="ease-in-out"
|
|
/>`}
|
|
</Box>
|
|
</Box>
|
|
|
|
<Box>
|
|
<Text fontWeight="bold" mb={2}>With Interactive Controls:</Text>
|
|
<Box as="pre" bg="gray.100" p={3} borderRadius="md" fontSize="sm" overflowX="auto">
|
|
{`<CyclingImage
|
|
src="/path/to/image.png"
|
|
position="absolute"
|
|
w="200px"
|
|
left="50px"
|
|
top="100px"
|
|
showControls={true}
|
|
autoStart={false}
|
|
cycleDuration={3}
|
|
intensity={0.6}
|
|
/>`}
|
|
</Box>
|
|
</Box>
|
|
</VStack>
|
|
</Box>
|
|
</VStack>
|
|
</Box>
|
|
)
|
|
}
|
|
|
|
export default CyclingImageDemo
|