healthy_oil/docs/CYCLING_IMAGE_QUICK_REFERENCE.md

CyclingImage - Quick Reference

Import

import CyclingImage from './components/new_ui/CyclingImage'

Minimal Usage

<CyclingImage src="/images/my-image.png" />

Common Patterns

Hero Section Animation

<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

<CyclingImage 
  src="/images/warning.png"
  position="absolute"
  w="80px"
  cycleDuration={1.5}
  intensity={0.8}
/>

Subtle Background Glow

<CyclingImage 
  src="/images/background.png"
  position="relative"
  w="100%"
  cycleDuration={8}
  intensity={0.2}
/>

Interactive Demo Element

<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

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