10 objects

Image for Three.js & React Three Fiber

One picture shown through a 3D construction that animates every change: shards, prisms, lenticular prints, paper, frost and more.

An image object shows one picture through a physical construction, and animates the change every time the picture is swapped: shards flip over, paper rolls up, prisms turn, frost breathes across glass. Where a gallery holds a set of pictures, an image object is one surface built for the moment of change, which makes it a natural hero image, a product reveal or a slide in a story.

What's in the family

  • Shards: the picture cut into shards that lift, flip edge-on and land as the next picture in a travelling wave.
  • Prism: the picture printed across a row of slim triangular prisms, like a rotating billboard; each prism turns a third of a turn to show the next one.
  • Lenticular: a ribbed lenticular print. The flip sweeps across the sheet and depends on the angle you look from.
  • Paper and print: Relief embosses the picture into paper, Roll winds the old print up and lays the new one down, and Engraving draws it in fine ink strokes that turn like iron filings toward the next picture.
  • Light and glass: Projector throws the picture from a lens through a hazy beam onto a matte screen, and Frost hides it behind a pane of glass that frosts over and clears to reveal the new one.
  • Depth: Pinscreen raises the picture on fine metal pins, and Contour lifts it into floating contour lines that flow into the next picture's shape.

Lit by the scene or self-lit

Relief, Pinscreen, Prism, Lenticular, Frost and Roll are lit by the scene's lights, so they belong in a lit set and react to a moving light. Projector, Contour and Engraving carry their own light and work in a dark scene.

Changing the picture

The change plays whenever the picture is swapped. The simplest set-up: put a gallery next to the image, and give its frames a click interaction with the Show image effect, so clicking a thumbnail plays the change on the large picture. Most images have a Duration for the change and their own controls for its shape, such as Order, Spread and Sweep angle on Shards.

Between changes, images respond to the cursor. On Shards, Pointer mode tilts the shards to face it, lifts them under it or sends ripples through the slab; on Frost the cursor wipes the glass clear.

Choosing an image

  • Retail, signage and campaigns: Prism, Lenticular.
  • Editorial, print and stationery: Relief, Roll, Engraving.
  • Tech, data and architecture: Contour, Pinscreen.
  • Cinema, exhibitions and nostalgia: Projector.
  • Winter, beauty and luxury: Frost.
  • Portfolios and hero images: Shards.

All image

Click a card to play it live
01

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.

  • image
  • shards
  • flip
  • transition
▶ PreviewHow it works
02

Projector

The picture as projected light on a matte screen, thrown from a lens above, with a visible haze beam and dust lit by the image; a change racks focus and slides the next slide through the gate. Use for cinema, exhibitions, moody and nostalgic scenes.

  • image
  • projector
  • beam
  • haze
▶ PreviewHow it works
03

Relief

The picture embossed into paper by its own local contrast and lit by the scene; a change is a soft press travelling across the sheet, flattening the old impression and raising the new one as its ink lays down. Use for editorial, print, craft and product heroes.

  • image
  • relief
  • emboss
  • paper
▶ PreviewHow it works
04

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.

  • image
  • pinscreen
  • pins
  • relief
▶ PreviewHow it works
05

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.

  • image
  • prism
  • trivision
  • slats
▶ PreviewHow it works
06

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.

  • image
  • lenticular
  • lens
  • print
▶ PreviewHow it works
07

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.

  • image
  • frost
  • glass
  • condensation
▶ PreviewHow it works
08

Roll

A print on paper; a change is a slim paper roll travelling across it, winding up the old print and laying down the new one, lit and shadowed by the scene. Use for editorial, stationery, packaging and calm product heroes.

  • image
  • paper
  • roll
  • curl
▶ PreviewHow it works
09

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.

  • image
  • contour
  • topographic
  • lines
▶ PreviewHow it works
10

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.

  • image
  • engraving
  • hatching
  • strokes
▶ PreviewHow it works

Code and API

Ready-to-paste React Three Fiber code and the 3DRise API are included in paid plans, inside the studio.

See plans

More object types