# 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