100 lines
2.4 KiB
Markdown
100 lines
2.4 KiB
Markdown
# 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
|