Gallery layout

Flow Lines

Pictures as fine lines flowing like water around their own forms: inactive ones are thin grey dashed lines drifting, the active one closes the dashes and thickens the lines into the picture in full colour behind a soft wave; the cursor parts the lines. Use for wellness, nature, music and calm showcases.

  • gallery
  • flow
  • lines
  • streamlines
  • calm
  • interactive

Settings and defaults

shared

Layout
Row
Aspect
1.4
Spacing
1.3
Visible
2.4
Shape
1
Stiffness
26
Damping
8.5
Lines
64
Bend
2.2
Meander
0.6
Flow
0.35
Smoothing
2.4
Intensity
1
Opacity
1
Throwing
0.12

cursor

Pointer mode
Part
Navigation
Click
Pointer strength
1
Pointer radius
0.5
Part
1.6

inactive

Depth
1
Dim
0.6
Dashes
9
Hairline
0.22

active

Change time
2.2
Wave
0.35
Slant
0.3

pictures

Autoplay
0

Flow Lines draws every picture as fine lines flowing through it like water around stones. The lines bend around the picture's forms and drift in a slow meander, and soft dashes run along them with the flow, faster where the picture is bright.

How it works

A waiting picture is thin grey dashed lines drifting. When it becomes the active one, a soft wave crosses it: behind the wave the dashes close into solid lines, the lines thicken and take the picture's colour, until they meet and the picture is whole. The flow keeps moving in its fine grain, so the active picture never goes fully still. In Part mode the cursor parts the lines around it, like a finger drawn through water.

Settings

  • Lines: how many lines run across the picture.
  • Bend: how much the picture's forms bend the lines.
  • Meander: the slow wandering of the lines.
  • Flow: the speed of the flow along the lines.
  • Dashes: how many dashes break a waiting picture's lines; 0 makes them solid.
  • Hairline: how thin a waiting picture's lines are.
  • Part: how strongly the cursor parts the lines.
  • Change time, Wave and Slant: the speed, softness and angle of the change wave.

Use it for

Wellness and spa brands, nature and water themes, music, calm portfolio pages. For straight engraved lines instead, see Engraving; for a whole scene with water, see the ocean.

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 gallery layouts

Contour Lines

Pictures drawn as the contour lines of their own brightness, like a topographic map: inactive ones are a few thin grey lines, the active one fills in as a soft wave thickens the lines into the solid picture; the cursor lifts the contours into relief. Use for architecture, data and graphic showcases.

Engraving

Pictures drawn as banknote engraving, fine parallel lines bent and widened by the picture’s tone: inactive ones are a faint grey hatch, the active one thickens into full colour behind a soft wave; the cursor turns the hatching under it. Use for luxury, finance, heritage and editorial showcases.

Ridgelines

Pictures as stacked horizontal hairlines lifted by their brightness, each ridge hiding the lines behind it: inactive ones are flat grey lines, the active one rises into ridges and fills with the picture’s colour behind a soft wave; the cursor raises the ridges. Use for music, data, tech and editorial showcases.

Basic Carousel

A coverflow carousel of framed pictures on a damped scroll with drag, throw and snap, a lifted centre frame and a soft floor reflection; the cursor tilts or lifts the frames. Use for portfolios, product lines and photo sets.

Depth Layers

Pictures split by brightness into thin sheets floating in depth: inactive ones are collapsed into one faint grey sheet, the active one opens into depth in full colour and its sheets slide past each other with real parallax. Use for editorial, music and dreamy showcases.

Fold

Pictures printed on paper folded in one of six ways (accordion, herringbone, fan, scroll, page curl, crumple) and lit by the scene: inactive ones are folded tight and grey, the active one unfolds flat into full colour; the cursor presses a dent into it. Use for print, editorial, fashion and craft showcases.

Works well with