Image
Shards
A picture tessellated into shards that lift, flip edge-on and land as the next picture in a travelling wave whenever the image changes; the cursor tilts, lifts or ripples the shards. Use for hero images, portfolios and product reveals.
Settings and defaults
- Order
- Sweep
- Pointer mode
- Tilt
- Columns
- 40
- Rows
- 25
- Tiling
- 0.35
- Aspect
- 0
- Seed
- 7
- Duration
- 1.6 s
- Interval
- 5 s
- Spread
- 0.5
- Sweep angle
- 0 °
- Delay jitter
- 0.15
- Lift
- 0.35
- Drift
- 0.08
- Spin
- 0.6
- Breathe
- 0.5
- Ken Burns
- 0.5
- Seams
- 0.12
- Rim light
- 0.8
- Intensity
- 1
- Opacity
- 1
- Pointer strength
- 1
- Pointer radius
- 0.6
- Seam colour
- #0b0d12
- Rim colour
- #ffd9a6
- Backing colour
- #101218
- Pointer colour
- #9ad7ff
Shards shows one picture as a slab broken into hundreds of pieces. When the picture changes, a wave runs across the slab: each shard lifts off, flips edge-on, tumbles a little and lands back in its slot showing the new picture.
How it works
The picture is cut into a jittered grid of shards. The new picture is swapped onto each shard at the exact moment it is edge-on, so you never see the switch, only the flip. The slab itself never moves; every shard returns exactly to where it started. At rest the shards breathe slowly and the picture drifts inside them with a gentle Ken Burns zoom. Change the picture in the studio, or let a gallery send its clicked frame here.
Settings
- Columns, Rows and Tiling set how many shards there are and how irregular they look, from a neat grid to jagged polygons.
- Order picks the wave: Sweep, Radial from the centre, or Random; Sweep angle sets its direction.
- Spread, Lift, Drift and Spin set how much of the slab is in flight and how far shards rise, scatter and tumble.
- Seams, Rim light and their colours set the gaps and the light caught on tilted shards.
Cursor
Pointer mode makes the shards Tilt toward the cursor, Lift under it, or Ripple through the slab.
Use it for
- Hero images and product reveals
- Portfolios and campaign showcases
Code and API
Ready-to-paste React Three Fiber code and the 3DRise API are included in paid plans, inside the studio.
More image
Contour
The picture as a topographic map of itself: a change opens it into hairline contour lines that lift into a floating stack in depth and flow continuously into the new picture's contours before it fills back in. Use for tech, data, science and architecture.
Engraving
The picture as an ink engraving on paper, fine strokes laid along its own isophotes, dense where it is dark, at a depth set by brightness; a change lifts and turns every stroke to the new picture's flow like filings in a field. Use for luxury, editorial, banknote and art direction.
Frost
A print behind a pane of real glass; a change is a breath of frost that feathers in from the edges, blurs the print through the glass, and clears from the centre to reveal the new picture; the cursor wipes the glass. Use for winter, luxury, beauty and calm editorial.
Lenticular
A lenticular print: fine lenses over interleaved strips of the old and new picture; a change sweeps the flip across the sheet and depends on the viewing angle, with ribbed clearcoat highlights from the scene light. Use for collectibles, posters, fashion and retail.
Pinscreen
The picture as a pinscreen of fine metal pins, each standing out by the brightness under it with a domed head in the picture's colour; a change is a pressure wave that sinks the pins and raises the new relief. Use for tech, product and sculptural heroes.
Prism
The picture printed across a row of slim triangular prisms; a change turns each prism a third of a turn in a travelling wave, its faces passing through the scene light, to show the next picture. Use for signage, retail, product and campaign heroes.
Works well with
3D print
Print a 3D object layer by layer like an FDM printer, with a hot nozzle and glowing layers, or show its slicer preview.
Object effectFloat
Hover in the air — a soft bob that never quite repeats, drifting and banking a little
Object effectFly-by
Takes off, banks and flies past the camera — it comes back from behind the camera on the other side and sets down in place
Object effectGLB
GLB is the single-file binary form of glTF, the 3D format made for the web. Upload a GLB to 3DRise and build an interactive scene around it.
Model formatGLTF
GLTF is the text form of glTF, the open 3D format for the web. Bring a GLTF into 3DRise and restyle it with materials and effects.
Model formatGrow
Scale up (or down) and stay — settles with a small overshoot; switching off brings it back
Object effect