Pacific Tides
Oahu, US
Editorial
Chromatic Image
An interactive image with responsive color separation, displacement, and tilt.
Installation
Run the following command
npx shadcn@latest add @aceternity/chromatic-imageExamples
Project Carousel
Selected work
Spaces with a slower rhythm
Altitude Study
Dolomites, IT
Landscape
Signal No. 02
Studio archive
Digital
Signal No. 03
Studio archive
Digital
Bento Features
Built for expressive media
One image, four useful capabilities
- Directional color01
- The channel split follows pointer movement, so the image responds to intent instead of playing a fixed loop.
- Native WebGL02
- The shader runs directly on the GPU without a scene library or animation dependency.
- Any image source03
- Pass a local asset, CDN URL, or CMS image through one small component API.
- Responsive by default04
- Cover cropping and resize observation keep the treatment stable at every aspect ratio.
Brand Campaign Hero
Studio sessions
Edition / 01
After hours at Northline
Ideas look different after dark
Flexible studios for small teams that need room to think, test, and make together.
Props
| Prop | Type | Default | Description | Required |
|---|---|---|---|---|
src | string | - | Image URL or local asset path. | Yes |
alt | string | - | Alternative text for the fallback image. | Yes |
children | React.ReactNode | - | Content rendered over the interactive image. | No |
className | string | - | Extra classes for the outer container. | No |
backgroundColor | string | "#111111" | Canvas background shown before the image loads. | No |
zoom | number | 0.2 | Image zoom applied during pointer interaction. | No |
displacement | number | 0.05 | Strength of the horizontal image displacement. | No |
chromaticShift | number | 0.01 | Distance between the separated color channels. | No |
tilt | number | 0.3 | Strength of the pointer-based perspective tilt. | No |
Build websites faster and 10x better than your competitors with
Aceternity UI Pro
Next.js 15, Tailwind CSS v4 and Motion for react powered templates
200+ templates and blocks combined
Ready to copy paste component blocks, save days of development time
