Data-display

252 components

data-display0
React Bits Ripple Distortion
A photo-like poster that ripples like water under the pointer or on click, with tints and a hover or click trigger.
React Bitsanimationreact-bitswebglMIT + Commons Clause License Condition v1.0
data-display0
React Bits Paper Crumple
A poster rendered as three.js paper that crumples while held and can be dragged, with release behaviours and a reset.
React Bitsanimationreact-bitswebglMIT + Commons Clause License Condition v1.0
data-display0
React Bits Orbit Images
Team avatars travelling along an elliptical orbit around a centre label.
React Bitsanimationinteractivereact-bitsMIT + Commons Clause License Condition v1.0
data-display0
React Bits Morph Slider
An image slider whose slides morph into each other through an ogl WebGL shader timed by GSAP, with four transition styles and autoplay.
React Bitsanimationgsapreact-bitsMIT + Commons Clause License Condition v1.0
data-display0
React Bits Model Viewer
A React Three Fiber model viewer showing a local faceted gem that you can drag to rotate and scroll to zoom, with studio lighting and auto-rotate.
React Bitsanimationreact-bitswebglMIT + Commons Clause License Condition v1.0
data-display0
React Bits Masonry
A masonry gallery of report covers laid out and animated in with GSAP, with entrance directions and hover blur-to-focus.
React Bitsanimationgsapreact-bitsMIT + Commons Clause License Condition v1.0
data-display0
React Bits Logo Loop
An infinite strip of customer wordmarks that pauses and scales up on hover.
React Bitsanimationinteractivereact-bitsMIT + Commons Clause License Condition v1.0
data-display0
React Bits Infinite Spiral
Destination cards orbiting up an endless 3D spiral that pauses on hover.
React Bitsanimationinteractivereact-bitsMIT + Commons Clause License Condition v1.0
data-display0
React Bits Image Trail
A trail of product shots that follows the pointer across a dark panel with GSAP, with three of the upstream trail variants.
React Bitsanimationgsapreact-bitsMIT + Commons Clause License Condition v1.0
data-display0
React Bits Halftone Reveal
A halftone-printed image that reveals the original under the pointer, with mono, duotone and colour modes.
React Bitsanimationreact-bitswebglMIT + Commons Clause License Condition v1.0
data-display0
React Bits Grid Distortion
A launch poster drawn on a three.js grid that bends and ripples under the pointer, with grid density and distortion strength options.
React Bitsanimationreact-bitswebglMIT + Commons Clause License Condition v1.0
data-display0
React Bits Gradual Blur
A scrolling article panel whose bottom edge fades out under a layered gradual blur.
React Bitsanimationinteractivereact-bitsMIT + Commons Clause License Condition v1.0
data-display0
React Bits Folder Float
A folder of review notes that pops open when clicked, its notes floating out with gentle physics.
React Bitsanimationinteractivereact-bitsMIT + Commons Clause License Condition v1.0
data-display0
React Bits Folder
A playful folder that opens to fan out its papers on click, in a chosen colour.
React Bitsanimationinteractivereact-bitsMIT + Commons Clause License Condition v1.0
data-display0
React Bits Flying Posters
A column of WebGL posters that fly and bend as you scroll over them, using local project artwork.
React Bitsanimationreact-bitswebglMIT + Commons Clause License Condition v1.0
data-display0
React Bits Fluid Glass
A WebGL scene of scrolling artwork and a headline seen through a glass lens, bar or cube that follows the pointer and bends the light, with a choice of three glass shapes.
React Bitsanimationinteractivereact-bitsMIT + Commons Clause License Condition v1.0
data-display0
React Bits Flex Carousel
A WebGL carousel that bends cards through a liquid lens as you drag, with bend presets, captions and autoplay.
React Bitsanimationreact-bitswebglMIT + Commons Clause License Condition v1.0
data-display0
React Bits Fade Content
Release-note cards that fade in, optionally from a blur, with GSAP ScrollTrigger as you scroll a panel, with a blur option and a replay.
React Bitsanimationgsapreact-bitsMIT + Commons Clause License Condition v1.0
data-display0
React Bits Elastic Mesh
A springy WebGL mesh card that stretches toward the pointer, shown as a gradient card or with local artwork.
React Bitsanimationreact-bitswebglMIT + Commons Clause License Condition v1.0
data-display0
React Bits Dome Gallery
A draggable dome of project tiles; click a tile to enlarge it.
React Bitsanimationinteractivereact-bitsMIT + Commons Clause License Condition v1.0
data-display0
React Bits Dodge Field
A cheeky "unsubscribe" button that dodges the pointer around its field until it gives up.
React Bitsanimationinteractivereact-bitsMIT + Commons Clause License Condition v1.0
data-display0
React Bits Dither Veil
A dithered print of a project image that reveals the original under the pointer, with dithering pattern and palette options.
React Bitsanimationreact-bitswebglMIT + Commons Clause License Condition v1.0
data-display0
React Bits Depth Carousel
A stacked 3D carousel of report covers that GSAP tilts and slides in depth, with tilt direction and autoplay options.
React Bitsanimationgsapreact-bitsMIT + Commons Clause License Condition v1.0
data-display0
React Bits Counter
A rolling odometer counter of signed-up users that animates digit by digit.
React Bitsanimationinteractivereact-bitsMIT + Commons Clause License Condition v1.0