Gallery layout
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.
Settings and defaults
shared
- Layout
- Row
- Aspect
- 1.5
- Warp
- 150
- Weft
- 96
- Spacing
- 1.3
- Visible
- 2.2
- Shape
- 1
- Stiffness
- 30
- Damping
- 9
- Weave
- 0.25
- Warp glow
- 0.22
- Intensity
- 1
- Opacity
- 1
- Throwing
- 0.12
- Warp color
- #d8c9a8
- Shuttle color
- #ffd9a6
cursor
- Pointer mode
- Reveal
- Navigation
- Click
- Pointer strength
- 1
- Pointer radius
- 0.5
- Pointer color
- #ffd9a6
inactive
- Depth
- 1
- Dim
- 0.35
- Unravel time
- 1.6
- Thread
- 0.22
active
- Weave time
- 2.2
- Wave
- 0.35
- Slant
- 0.35
- Shuttle
- 0.3
pictures
- Autoplay
- 0
Loom weaves your pictures. A taut warp of fine vertical threads is always there, and the picture is the weft: one horizontal thread per row, each carrying its row of the image. A waiting picture is a sparse grey weave with the warp showing through.
How it works
When a picture becomes the active one, a soft diagonal wave crosses it from the top left. Under the wave each weft thread swells to fill its row and takes its colour, until the cloth is closed and the warp disappears under the picture. Leaving runs the wave back and the picture unravels to grey. A faint brightening, the shuttle, rides on the wave while it weaves. In Reveal mode the cursor swells and colours the grey weave where it passes.
Settings
- Warp and Weft: how many threads run across and down a picture. Fewer gives a coarse tapestry.
- Weave time and Unravel time: seconds to close a picture and to undo it.
- Wave and Slant: the softness of the weaving wave and how diagonal it runs.
- Thread: the thickness of the weft threads in a waiting picture.
- Shuttle and Shuttle color: the light on the wave.
- Warp glow and Warp color: how much the warp shows.
Use it for
Textile and craft brands, fashion, slow graphic reveals on a portfolio page. For threads of light instead of yarn, see Light Threads; for real hanging cloth, see Silk.
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
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.
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.
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.
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 effectAsh
Light tan ash with a satin finish, slightly olive in tone. For furniture, tool handles, sports gear and natural interiors.
WoodAura 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.
CursorBubbles
A bubble cursor: iridescent soap bubbles rise from the mouse pointer, drift and pop. For kids, playful brands, water and beauty sites.
CursorGrow
Scale up (or down) and stay — settles with a small overshoot; switching off brings it back
Object effect