React Media Components
Image comparison, galleries, lightboxes, video frames and contact sheets. The main job of a media component is to keep the layout from shifting, which means reserving dimensions before anything loads.
16 components, 8 of them free to install without an account.
A video player with a custom control bar that fades out automatically during playback, supporting scrub-to-seek, volume, fullscreen, and keyboard operation.
Web Audio API audio spectrum visualization drawn in canvas 2D, in bar, mirror, and radial styles, able to analyze a real audio source or drive a decorative animation from synthetic data.
- Image CompareFree
Drag the divider in the middle to compare a before and an after layer, clipped with clip-path and following smoothly on a spring.
- Zoom LensFree
An image magnifier whose lens follows the cursor and magnifies in place, or presents the magnified result in a side panel.
- Device MockupFree
Safari / iPhone / Android device frames with a 3D hover tilt, floating, and a reveal animation.
The screen rises out of a MacBook as you scroll
A click-to-play hero video dialog with a thumbnail, a pulsing play button, and a range of enter and exit animations.
- Progressive BlurFree
A progressive blur mask at the edge of scrolling content — the closer to the edge, the blurrier — so content fades in and out smoothly.
The classic documentary-style slideshow of slow zooms and pans, with cross-fades.
An audio waveform progress bar you can drag to seek, with the played region highlighted.
A playable vinyl turntable: the record spins, the tonearm swings in, and you can drag the record to scratch.
A React thumbnail wall that opens a full-screen lightbox: the image morphs in from its thumbnail as a shared element, with wheel/pinch zoom and drag panning, double-tap zoom, swipe and keyboard navigation, a counter and caption bar, a bottom thumbnail strip, and Esc or backdrop to close.
A skeuomorphic cassette audio player: reels spin with playback time, tape spools grow and shrink with progress, plus an animated rewind, a draggable scrubber and caption tracks.
A pure-CSS 3D stage for phones, tablets and laptops with five arrangements: pointer tilt, scroll orbit, Y-axis flip, a fanned lineup of devices and a scroll-driven macro pull-back; screens are live DOM.
- Cover WallFree
A React grid wall of covers that fills in cell by cell from the centre outward, with a rolling counter and copy overlaid in the middle; hovering pushes a cell forward while neighbours recede.
- Image StrobeFree
A React strobe effect that flips full-bleed images at high speed while centred content stays fixed, stopping on the last frame; triggered on entering the viewport, on mount or via ref.play(), with a slow crossfade under reduced motion.