Gallery layout
Halo
Scene-lit prints on a tilted ring; the picture that comes round to the front steps out toward the viewer, grows and comes to full colour while the others ride the ring faded and grey. Use for brand rings, collections and hero rotations.
Settings and defaults
shared
- Layout
- Ring
- Aspect
- 1.4
- Spacing
- 1
- Visible
- 2.4
- Shape
- 1
- Stiffness
- 26
- Damping
- 8
- Roughness
- 0.6
- Intensity
- 1
- Opacity
- 1
- Throwing
- 0.12
cursor
- Navigation
- Click
inactive
- Depth
- 0
- Dim
- 0.35
active
- Step out
- 0.7
- Focus scale
- 1.3
- Change time
- 0.9
pictures
- Autoplay
- 0
Halo sets your pictures as prints on a tilted ring. The picture that comes round to the front steps out of the ring toward the viewer, grows and comes to full colour, while the others ride the ring faded and grey.
How it works
The ring turns on a damped spring, so each move to the next picture has a little weight and settles without a hard stop. The prints are lit by the scene's own lights, with a matte or satin finish set by Roughness. The step out, the growth and the return to colour all take the same Change time, so the front picture arrives as one gesture. Halo is made for the Ring layout but works on any of them.
Settings
- Step out: how far the front picture comes out of the ring toward the viewer.
- Focus scale: how much larger the front picture grows.
- Change time: seconds a picture takes to step out and come to colour.
- Dim: how faded the pictures on the ring are.
- Roughness: the finish of the prints under the scene's light.
- Layout and Shape: Ring by default; Shape sets the ring's tilt, from seen edge-on to steep.
- Autoplay: seconds between automatic turns, 0 for off.
Use it for
Brand rings, collections, team pages and hero rotations at the top of a page. For a flatter strip with a floor reflection, see the Basic Carousel.
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
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.
Glass Panes
Pictures sealed behind thick panes of physical glass that refract the room and are lit by the scene; the front pane steps forward, the others stand back dimmer. Use for architecture, luxury, product and corporate showcases.
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
Diamond
Brilliant diamond-like material with high refraction and sparkle, perfect for jewelry and gems
GlassFloat
Hover in the air — a soft bob that never quite repeats, drifting and banking a little
Object effectPhysical Material
The most complete physically based 3D material: clearcoat, transmission, sheen and iridescence for car paint, glass, velvet and bubbles.
BasicSilk drape
Drop a silk sheet over a 3D object that drapes and collapses as it vanishes. Reversed, it is the magician-style unveiling.
Object effectAcrylic
Clear acrylic with a smooth, reflective surface. For display cases, signs, award blocks and transparent product parts.
PlasticAdvanced
Five advanced 3D materials: a mirror floor, refraction, see-through transmission glass, and two surfaces that distort or wobble the shape in motion.
Material