Gallery layout
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.
Settings and defaults
shared
- Layout
- Row
- Aspect
- 1.4
- Spacing
- 1.3
- Visible
- 2.4
- Shape
- 1
- Stiffness
- 26
- Damping
- 8.5
- Intensity
- 1
- Opacity
- 1
- Throwing
- 0.12
cursor
- Pointer mode
- Split
- Navigation
- Click
- Pointer strength
- 1
- Pointer radius
- 0.55
inactive
- Depth
- 1
- Dim
- 0.28
- Split
- 0.12
- Dispersion
- 0.25
- Saturation
- 0.3
active
- Change time
- 1.8
- Wave
- 0.35
- Slant
- 0.3
pictures
- Autoplay
- 0
Prism Split shows every picture as its red, green and blue channels on three planes of light. Where the three planes line up they add up to the true picture; where they drift apart they leave soft colour fringes, like light through a prism.
How it works
A waiting picture's planes stand apart in depth and a little sideways, dim and nearly grey, so it reads as a faint picture with coloured edges. When it becomes the active one, a soft wave crosses it and the planes slide together behind it, bending along the front of the wave; the fringes thin out and the colour comes in full. In Split mode the cursor pulls the planes apart again where it passes, so the picture breaks into its colours under the pointer.
Settings
- Split: the depth between the colour planes of a waiting picture.
- Dispersion: how far the planes also shift sideways, which sets how wide the fringes are.
- Saturation: how much colour a waiting picture keeps.
- Change time, Wave and Slant: the speed, softness and angle of the change wave.
- Layout, Dim and Depth: where the pictures sit and how the waiting ones fade.
Use it for
Tech launches, music and club artwork, optics-inspired showcases. A single picture in the same style is the Prism image; for the same split as a screen effect on the whole scene, see Chromatic Aberration.
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 Rise Mesh Shader Material
An unlit surface that shows a color or an image exactly as given, unaffected by scene lights. For screens, posters, panels and flat graphics.
Custom ShaderAura 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.
CursorChromatic Aberration
Chromatic aberration post-processing: split the colour channels into thin fringes for a lens, VHS or glitchy screen look.
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.
CursorCustom Shader
Custom shader surfaces for 3D objects: an unlit color-or-image surface to start from, and the shader materials you create yourself in the studio.
Material