light cycle

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
+<CyclingImage src="/images/my-image.png" />
+```
+
+## Common Patterns
+
+### Hero Section Animation
+```tsx
+<CyclingImage 
+  src="/images/hero-text.png"
+  position="absolute"
+  w={{ base: "100px", lg: "200px" }}
+  left={{ base: "20px", lg: "50px" }}
+  top="10vh"
+  cycleDuration={4}
+  intensity={0.6}
+/>
+```
+
+### Alert/Warning Effect
+```tsx
+<CyclingImage 
+  src="/images/warning.png"
+  position="absolute"
+  w="80px"
+  cycleDuration={1.5}
+  intensity={0.8}
+/>
+```
+
+### Subtle Background Glow
+```tsx
+<CyclingImage 
+  src="/images/background.png"
+  position="relative"
+  w="100%"
+  cycleDuration={8}
+  intensity={0.2}
+/>
+```
+
+### Interactive Demo Element
+```tsx
+<CyclingImage 
+  src="/images/demo.png"
+  position="relative"
+  w="300px"
+  showControls={true}
+  autoStart={false}
+/>
+```
+
+## 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