From b09f08849f9e73467e533c7277f8e58438aa7889 Mon Sep 17 00:00:00 2001 From: philipcheung Date: Sat, 25 Oct 2025 16:13:58 +0800 Subject: [PATCH] light cycle --- docs/CYCLING_IMAGE_COMPONENT.md | 315 +++++++++++++++++++++ docs/CYCLING_IMAGE_QUICK_REFERENCE.md | 99 +++++++ src/components/new_ui/CyclingImage.tsx | 151 ++++++++++ src/components/new_ui/CyclingImageDemo.tsx | 219 ++++++++++++++ src/components/new_ui/hero1.tsx | 41 ++- 5 files changed, 817 insertions(+), 8 deletions(-) create mode 100644 docs/CYCLING_IMAGE_COMPONENT.md create mode 100644 docs/CYCLING_IMAGE_QUICK_REFERENCE.md create mode 100644 src/components/new_ui/CyclingImage.tsx create mode 100644 src/components/new_ui/CyclingImageDemo.tsx diff --git a/docs/CYCLING_IMAGE_COMPONENT.md b/docs/CYCLING_IMAGE_COMPONENT.md new file mode 100644 index 0000000..3f57a41 --- /dev/null +++ b/docs/CYCLING_IMAGE_COMPONENT.md @@ -0,0 +1,315 @@ +# CyclingImage Component Documentation + +## Overview + +`CyclingImage` is a dynamic React component that implements continuous light-to-dark color cycling animations on images while maintaining full responsive positioning across all viewport sizes. The component features smooth transition effects that oscillate between light and dark themes with customizable settings. + +## Features + +✅ **Smooth Animations**: Hardware-accelerated CSS animations for optimal performance +✅ **Fully Responsive**: Works with all Chakra UI responsive props (base, sm, md, lg, xl) +✅ **Flexible Positioning**: Maintains absolute/relative positioning +✅ **Customizable Duration**: Adjust cycle speed from 0.5s to 10s+ +✅ **Adjustable Intensity**: Control brightness range from 0% to 100% +✅ **Multiple Timing Functions**: Support for ease, linear, cubic-bezier, and more +✅ **Interactive Controls**: Optional play/pause and real-time adjustments +✅ **Auto-start or Paused**: Choose initial animation state +✅ **Minimal Performance Impact**: Efficient CSS-based implementation + +## Installation + +The component is located at: +``` +src/components/new_ui/CyclingImage.tsx +``` + +## Basic Usage + +```tsx +import CyclingImage from './components/new_ui/CyclingImage' + +function MyComponent() { + return ( + + ) +} +``` + +## Props API + +| Prop | Type | Default | Description | +|------|------|---------|-------------| +| `src` | `string` | **required** | Image source URL | +| `position` | `CSSProperties['position']` | `'relative'` | CSS position value | +| `w` | `any` | - | Width (supports responsive objects) | +| `left` | `any` | - | Left position (supports responsive objects) | +| `top` | `any` | - | Top position (supports responsive objects) | +| `right` | `any` | - | Right position (supports responsive objects) | +| `bottom` | `any` | - | Bottom position (supports responsive objects) | +| `cycleDuration` | `number` | `3` | Duration of one cycle in seconds | +| `intensity` | `number` | `0.5` | Brightness variation (0-1) | +| `timingFunction` | `string` | `'ease-in-out'` | CSS timing function | +| `showControls` | `boolean` | `false` | Display interactive controls | +| `autoStart` | `boolean` | `true` | Auto-start animation | +| `style` | `CSSProperties` | `{}` | Additional CSS styles | + +## Usage Examples + +### 1. Default Configuration + +Simple usage with default settings (3s cycle, 50% intensity): + +```tsx + +``` + +### 2. Responsive Positioning + +Using Chakra UI responsive objects: + +```tsx + +``` + +### 3. With Interactive Controls + +Enable user controls for play/pause and adjustments: + +```tsx + +``` + +### 4. Fast Pulse Effect + +Quick pulsing animation: + +```tsx + +``` + +### 5. Slow Breathing Effect + +Gentle, subtle animation: + +```tsx + +``` + +### 6. Custom Timing Function + +Using cubic-bezier for unique effects: + +```tsx + +``` + +### 7. Paused by Default + +Start with animation paused: + +```tsx + +``` + +## Integration Example + +Here's how it's integrated in the hero1.tsx component: + +```tsx +import { Box, Image, Stack } from '@chakra-ui/react' +import CyclingImage from './CyclingImage' + +function Hero1() { + return ( + + + + {/* Warning Text with Animation */} + + + {/* Static images remain unchanged */} + + + + + ) +} +``` + +## Control Panel + +When `showControls={true}`, the component displays an interactive control panel with: + +- **Play/Pause Button**: Toggle animation on/off +- **Speed Slider**: Adjust cycle duration (0.5s - 10s) +- **Intensity Slider**: Adjust brightness variation (0% - 100%) + +## Animation Details + +The component uses CSS `filter: brightness()` with keyframe animations: + +```css +@keyframes lightToDarkCycle { + 0% { + filter: brightness(1 + intensity); /* Light */ + } + 50% { + filter: brightness(1 - intensity); /* Dark */ + } + 100% { + filter: brightness(1 + intensity); /* Back to light */ + } +} +``` + +**Intensity Examples:** +- `0.3` → brightness range: 0.7 to 1.3 (subtle) +- `0.5` → brightness range: 0.5 to 1.5 (moderate) +- `0.8` → brightness range: 0.2 to 1.8 (dramatic) + +## Timing Functions + +Common timing functions you can use: + +- `'ease'` - Default smooth transition +- `'linear'` - Constant speed +- `'ease-in'` - Slow start, fast end +- `'ease-out'` - Fast start, slow end +- `'ease-in-out'` - Smooth acceleration and deceleration +- `'cubic-bezier(0.68, -0.55, 0.265, 1.55)'` - Custom bounce effect + +## Performance Considerations + +- Uses hardware-accelerated CSS animations +- `will-change: filter` optimizes rendering +- Minimal JavaScript - only for controls +- No impact on image loading or layout + +## Demo Component + +A comprehensive demo is available at: +``` +src/components/new_ui/CyclingImageDemo.tsx +``` + +To view the demo, import it in your router or main component: + +```tsx +import CyclingImageDemo from './components/new_ui/CyclingImageDemo' + +// In your router or component + +``` + +## Browser Compatibility + +Works in all modern browsers that support: +- CSS animations +- CSS filters +- CSS keyframes + +## Troubleshooting + +**Animation not visible:** +- Check that `autoStart` is `true` (default) +- Verify `intensity` is not 0 +- Ensure image is loaded and visible + +**Controls not showing:** +- Set `showControls={true}` +- Check that there's enough space for the control panel + +**Responsive sizing issues:** +- Use Chakra UI responsive objects for all positioning props +- Test on different viewport sizes + +## License + +Part of the Healthy Oil project. + +## Author + +Created with Chakra UI and React. diff --git a/docs/CYCLING_IMAGE_QUICK_REFERENCE.md b/docs/CYCLING_IMAGE_QUICK_REFERENCE.md new file mode 100644 index 0000000..830587a --- /dev/null +++ b/docs/CYCLING_IMAGE_QUICK_REFERENCE.md @@ -0,0 +1,99 @@ +# CyclingImage - Quick Reference + +## Import +```tsx +import CyclingImage from './components/new_ui/CyclingImage' +``` + +## Minimal Usage +```tsx + +``` + +## Common Patterns + +### Hero Section Animation +```tsx + +``` + +### Alert/Warning Effect +```tsx + +``` + +### Subtle Background Glow +```tsx + +``` + +### Interactive Demo Element +```tsx + +``` + +## Props Cheatsheet + +| What you want | Prop to use | Example value | +|---------------|-------------|---------------| +| Image source | `src` | `"/images/logo.png"` | +| Size | `w` | `"200px"` or `{ base: "100px", lg: "200px" }` | +| Position | `left`, `top`, `right`, `bottom` | `"50px"` or `{ base: "20px", lg: "50px" }` | +| Animation speed | `cycleDuration` | `3` (seconds) | +| How bright/dark | `intensity` | `0.5` (0=none, 1=maximum) | +| Smooth/linear | `timingFunction` | `"ease-in-out"` or `"linear"` | +| Show controls | `showControls` | `true` or `false` | +| Start paused | `autoStart` | `false` | + +## Quick Timing Reference + +- **Slow breathing**: `cycleDuration={8}`, `intensity={0.3}` +- **Normal pulse**: `cycleDuration={3}`, `intensity={0.5}` +- **Fast alert**: `cycleDuration={1}`, `intensity={0.8}` + +## Responsive Sizing Template +```tsx +w={{ base: "100px", sm: "120px", md: "150px", lg: "11vw", xl: "10vw" }} +left={{ base: "20px", sm: "30px", md: "40px", lg: "30vw", xl: "37vw" }} +top={{ base: "3vw", sm: "3vw", md: "3vw", lg: "7vw", xl: "3vw" }} +``` + +## Files Created + +1. `/src/components/new_ui/CyclingImage.tsx` - Main component +2. `/src/components/new_ui/CyclingImageDemo.tsx` - Demo/examples +3. `/docs/CYCLING_IMAGE_COMPONENT.md` - Full documentation +4. `/docs/CYCLING_IMAGE_QUICK_REFERENCE.md` - This file + +## Current Usage + +The component is currently used in `/src/components/new_ui/hero1.tsx`: +- Animates the "threehightext.webp" warning image +- 4 second cycle duration +- 60% intensity diff --git a/src/components/new_ui/CyclingImage.tsx b/src/components/new_ui/CyclingImage.tsx new file mode 100644 index 0000000..2d05222 --- /dev/null +++ b/src/components/new_ui/CyclingImage.tsx @@ -0,0 +1,151 @@ +import { Box, Image, Button, HStack, VStack, Text } from '@chakra-ui/react' +import { useState, useEffect, CSSProperties } from 'react' + +interface CyclingImageProps { + src: string + position?: CSSProperties['position'] + w?: any + left?: any + top?: any + right?: any + bottom?: any + cycleDuration?: number // Duration of one complete cycle in seconds + intensity?: number // How dark/light it gets (0-1, where 1 is maximum) + timingFunction?: string // CSS timing function + showControls?: boolean // Show play/pause and speed controls + autoStart?: boolean // Auto-start animation + style?: CSSProperties // Additional CSS styles +} + +const CyclingImage = ({ + src, + position = 'relative', + w, + left, + top, + right, + bottom, + cycleDuration = 3, + intensity = 0.5, + timingFunction = 'ease-in-out', + showControls = false, + autoStart = true, + style = {} +}: CyclingImageProps) => { + const [isPlaying, setIsPlaying] = useState(autoStart) + const [speed, setSpeed] = useState(cycleDuration) + const [currentIntensity, setCurrentIntensity] = useState(intensity) + + useEffect(() => { + setSpeed(cycleDuration) + }, [cycleDuration]) + + const togglePlayPause = () => { + setIsPlaying(!isPlaying) + } + + const handleSpeedChange = (value: number) => { + setSpeed(value) + } + + const handleIntensityChange = (value: number) => { + setCurrentIntensity(value) + } + + // CSS keyframes animation + const animationName = 'lightToDarkCycle' + const animationStyle = ` + @keyframes ${animationName} { + 0% { + filter: brightness(${1 + currentIntensity}); + } + 50% { + filter: brightness(${1 - currentIntensity}); + } + 100% { + filter: brightness(${1 + currentIntensity}) ; + } + } + ` + + return ( + <> + + + + {showControls && ( + + + + + Animation Controls + + + + + + + Speed: {speed.toFixed(1)}s + + handleSpeedChange(parseFloat(e.target.value))} + min={0.5} + max={10} + step={0.5} + style={{ width: '100%', cursor: 'pointer' }} + /> + + + + + Intensity: {(currentIntensity * 100).toFixed(0)}% + + handleIntensityChange(parseFloat(e.target.value))} + min={0} + max={1} + step={0.1} + style={{ width: '100%', cursor: 'pointer' }} + /> + + + + )} + + ) +} + +export default CyclingImage diff --git a/src/components/new_ui/CyclingImageDemo.tsx b/src/components/new_ui/CyclingImageDemo.tsx new file mode 100644 index 0000000..e2d4507 --- /dev/null +++ b/src/components/new_ui/CyclingImageDemo.tsx @@ -0,0 +1,219 @@ +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 ( + + + + CyclingImage Component Demo + + Showcasing continuous light-to-dark color cycling animations + + + + + {/* Example 1: Default Settings */} + + Default Settings + + 3s cycle, 50% intensity, auto-start + + + + + + + {/* Example 2: With Controls */} + + With Interactive Controls + + Adjustable speed and intensity + + + + + + + {/* Example 3: Fast Cycle */} + + Fast Cycle (1s) + + Quick pulsing effect with high intensity + + + + + + + {/* Example 4: Slow & Subtle */} + + Slow & Subtle (8s) + + Gentle breathing effect with low intensity + + + + + + + {/* Example 5: Paused by Default */} + + Paused by Default + + Animation starts paused, with controls + + + + + + + {/* Example 6: Custom Timing Function */} + + Ease-In-Out-Back + + Custom cubic-bezier timing function + + + + + + + + {/* Features List */} + + Component Features + + ✅ Smooth continuous light-to-dark cycling animation + ✅ Fully responsive with all Chakra UI responsive props + ✅ Maintains absolute/relative positioning + ✅ Customizable cycle duration (0.5s - 10s+) + ✅ Adjustable intensity (0-100%) + ✅ Multiple timing functions (ease, linear, cubic-bezier) + ✅ Play/Pause controls (optional) + ✅ Real-time speed adjustment + ✅ Real-time intensity adjustment + ✅ Auto-start or paused initial state + ✅ CSS-based animations (hardware accelerated) + ✅ Minimal performance impact + + + + {/* Usage Examples */} + + Usage Examples + + + Basic Usage: + +{``} + + + + + With Custom Settings: + +{``} + + + + + With Interactive Controls: + +{``} + + + + + + + ) +} + +export default CyclingImageDemo diff --git a/src/components/new_ui/hero1.tsx b/src/components/new_ui/hero1.tsx index 24cc437..cd32b6b 100644 --- a/src/components/new_ui/hero1.tsx +++ b/src/components/new_ui/hero1.tsx @@ -1,4 +1,5 @@ import { Box, Image, Stack, } from '@chakra-ui/react' +import CyclingImage from './CyclingImage' function Hero1() { const bigWarningSize = { base: "80px", sm: "100px", md: "120px", lg: "9vw", xl: "8vw" }; @@ -32,54 +33,78 @@ function Hero1() { maxW={{ base: "40px", sm: "50px", md: "60px", lg: "70%", xl: "70%" }} bottom={'10px'} /> {/* signs */} - - - - {/* Warning Texts */} - - - -