Wave Slices — Animat

Wave Slices is a premium animated background component for Framer. It draws a sculpted 3D ribbon of glowing, layered slices that flows along a smooth sine wave. The effect is inspired by modern abstract 3D renders, but it is fully built in code, so you get crisp, lightweight motion at any size with no video files, no heavy assets and no external libraries.

The animation runs in a truly seamless infinite loop. There are no resets, no visible jumps, no flickering and no stuttering, just fluid 60fps motion. It is ideal for hero sections, landing pages, SaaS websites, AI and tech startups, portfolios, product launches, agency sites and dark-mode designs.

Key features

• Seamless infinite loop animation with smooth continuous motion

• Realistic 3D depth: perspective scaling, layered slices, edge shadows, rim lighting and a dark core band

• Full color control: background, highlight, mid tone, base, shadow, sheen and ambient glow, with support for Framer color styles

• Adjustable wave speed, twist speed and flow direction (left or right)

• Smooth transitions: fade-in, eased play and pause, and gradual speed changes with no snapping

• Shape controls: slice count, amplitude, wave count, slice size, thickness, perspective, tilt, lean, twist and vertical offset

• Lighting controls: edge shadow, rim light, core shade, glow size and glow position

• Fully responsive on desktop, tablet and mobile, with automatic slice density on small screens

• Optimized canvas rendering: high-DPI sharp, pauses when off-screen or when the tab is hidden

• Accessible: respects prefers-reduced-motion and is hidden from screen readers as a decorative element

• Works in the Framer canvas and on the published site, with a static preview option for the editor

• Zero dependencies, lightweight, production-ready and easy to customize without code