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.

  • image
  • contour
  • topographic
  • lines
  • depth
  • self-lit
  • interactive

Settings and defaults

Pointer mode
Open
Levels
26
Line width
0.9 px
Depth
1
Open
0.95
Smoothing
3.2
Idle lines
0.04
Tint
0.35
Spread
1
Sweep angle
0 °
Duration
2.8 s
Interval
5 s
Aspect
0
Breathe
0.5
Intensity
1
Opacity
1
Pointer strength
1
Pointer radius
0.6
Line colour
#cfe6ff
Pointer colour
#9ad7ff

Contour shows your picture as a topographic map of itself. Its brightness becomes height, and a picture change opens it into fine contour lines that lift into a floating stack in depth and flow into the contours of the new picture before it fills back in.

How it works

During a change the two pictures are blended as height maps and their contour lines are drawn from the blend, so the lines of the old picture move smoothly into the lines of the new one; they never jump. Under the travelling front the picture darkens away and the lines split into layers by level, each floating at its own depth, so you can see around the stack when the camera moves. At rest the faintest contours remain and drift slowly. It makes its own light, without scene lighting.

Settings

  • Levels sets how many contour lines cover the full brightness range; Line width their thickness.
  • Depth sets how far the stack opens; Open how far the picture darkens under the front.
  • Smoothing gives calmer, longer contours or finer detail.
  • Idle lines sets how many contours stay visible at rest.
  • Tint and Line colour mix the picture's colour with a line colour.

Cursor

Open lets the picture open into its contour stack around the cursor; Ripple bends the levels near it in a slow ring.

Use it for

  • Tech, data and science showcases
  • Architecture and mapping projects

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 image

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.

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.

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

Used in