Gallery layout
Light Threads
Pictures as curtains of fine vertical threads of light, one column of the image each; inactive curtains hang grey and faint, the arriving one fills with colour as light runs down its threads; the cursor brings colour back. Use for installations, dark lobbies, music and tech showcases.
Settings and defaults
shared
- Layout
- Row
- Aspect
- 1.5
- Threads
- 160
- Spacing
- 1.35
- Visible
- 2.4
- Shape
- 1
- Stiffness
- 35
- Damping
- 9
- Throwing
- 0.15
- Beads
- 0.12
- Intensity
- 1
- Opacity
- 1
- Rail
- Off
- Thread color
- #8fb8ff
- Rail color
- #9aa3b5
cursor
- Pointer mode
- Reveal
- Navigation
- Click
- Pointer strength
- 1
- Pointer radius
- 0.5
- Pointer color
- #ffd9a6
inactive
- Depth
- 1.2
- Dim
- 0.16
active
- Restring
- 1.4
- Sweep
- 0.6
- Head glow
- 1.2
pictures
- Autoplay
- 0
Light Threads shows every picture as a curtain of fine vertical threads of light, each thread carrying one column of the image like a string of beads. The curtain at the front pulls its threads into one plane and shows the picture in full colour; the others hang back in depth, grey and faint.
How it works
When the gallery moves to a new picture, light runs down each thread of the arriving curtain, thread after thread in a sweep from left to right, turning the faded colours into the full ones while the outgoing curtain fades. A real point light under the front curtain takes the picture's own average colour, so the light it throws changes with every picture. The cursor, in Reveal mode, is a soft light that brings colour back to the faded curtains it passes.
Settings
- Threads: how many threads make up a picture (40 to 400).
- Restring: seconds the light takes to run down the threads.
- Sweep: how far each thread runs behind its neighbour, from all at once to a slow sweep.
- Head glow and Thread color: the bright leading edge of the light.
- Beads: a bead pattern along each thread.
- Rail: show the rail the threads hang from.
- Layout: Row, Wave, Ring, Helix, Tunnel, Stack, Fan or Constellation.
Use it for
Dark lobbies, installations, music releases and tech showcases. It pairs well with Bloom and with the thread-based Loom.
Code and API
Ready-to-paste React Three Fiber code and the 3DRise API are included in paid plans, inside the studio.
More gallery layouts
Loom
Pictures woven on a loom: inactive ones are a sparse grey weave of thin threads over a fine warp, the active one is woven closed in full colour by a soft diagonal wave; the cursor reveals colour on the weave. Use for craft, textiles and slow graphic reveals.
Prism Split
Pictures as their red, green and blue channels on three planes of light: inactive ones stand apart in depth, dim with soft colour fringes, the active one slides together into the true picture behind a soft wave; the cursor splits it again. Use for tech, music and optics-inspired 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.
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.
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.
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.
Works well with
Aura Glow
An aura glow cursor: a soft iridescent halo with electric tendrils that follows the mouse. For wellness, magic and dreamy scenes.
CursorAurora Ribbon Trail
An aurora cursor: a ribbon of northern lights trails the mouse, flowing green, cyan and magenta. For night, nature, winter and dreamy scenes.
CursorBloom
Bloom post-processing: the brightest parts of a 3D scene glow and spill light, so neon, sparks and emissive materials read as light.
Post-processing effectComet Trail
A 3D comet cursor: a glowing head with a fading tail of light that follows the mouse across your scene. For space, sci-fi and night sites.
CursorGlow
Light the targets up with an emissive glow
Object effectAfterimage trail
Leave fading glassy copies of a 3D object along its path whenever it moves. A motion trail you add to any move.
Object effect