23 objects
Interactive 3D image galleries: frames on 17 layouts, a coverflow carousel, and galleries where each picture change is the effect.
A gallery shows a set of pictures in 3D. Add your images, pick a gallery, and visitors move through them with a click, a drag or autoplay. There are two kinds: the Layout gallery, which puts framed pictures on a shape, and a family of galleries where the change from one picture to the next is the effect itself.
The Layout gallery arranges frames on one of 17 layouts: Tiles (Grid), Horizontal, Vertical, Circular, Spiral, Arc, Helix, Sphere, Fan, Wave, Pyramid, Box (3D), Tunnel, Tunnel Pyramid, Tunnel Wave, Scattered and Random. The frames take any material, can be a box, a plane, a curved panel and more, or nothing at all, and can show the picture on the front, the back or both. It suits photo walls, portfolios and rooms full of pictures. The Basic Carousel is the classic coverflow: drag, throw and snap, a lifted centre frame and a soft floor reflection.
In the other galleries, the pictures waiting their turn rest in a muted state, usually faint and grey, and the active one comes to life in full colour as a soft wave crosses it:
These galleries share their navigation settings. Navigation turns the pointer off, lets a click to the right or left of centre go forward or back, or also lets visitors drag and throw. Autoplay sets the seconds between changes and pauses while the cursor is over the gallery. Visible sets how many neighbours show, Dim how bright the waiting pictures are, and Stiffness and Damping how briskly the gallery settles. Each also has a Pointer mode: the cursor brings colour back to Light Threads, breathes on the Silk, presses the Pinscreen pins in and turns the Slats near it.
A clicked gallery frame can also show its picture on an image object, so a row of thumbnails drives one large animated picture.
Frames of one shape arranged on a layout — tiles, circular, spiral, arc, helix, sphere, tunnel and more (config.layout) — with the pictures in config.imageUrls; the frames take the material and the transform effects. Use for photo walls, carousels of frames, portfolios and rooms of pictures.
▶ PreviewHow it worksPictures 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.
▶ PreviewHow it worksPictures printed on sheets of silk, each a cloth simulation hanging in a light breeze and lit by the scene with a soft sheen; the cursor is a breath of air on the cloth. Use for fashion, textiles and soft, calm showcases.
▶ PreviewHow it worksPictures made of particles: inactive ones are a faint grey stipple, the active one fuses into the solid picture in full colour as a small soft wave crosses it; the cursor turns the area it passes back into particles. Use for art, tech and dreamy showcases.
▶ PreviewHow it worksPictures 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.
▶ PreviewHow it worksScene-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.
▶ PreviewHow it worksPictures 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.
▶ PreviewHow it worksA 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.
▶ PreviewHow it worksPaper lanterns hanging from a sagging rope, one picture printed around each, swinging as real pendulums in a breeze; the front lantern hangs lower and glows from inside. Use for festive, warm and playful showcases.
▶ PreviewHow it worksPictures as beds of fine pins lit by the scene: inactive ones are a flat grey bed, the active one is pushed out by a soft wave into a relief in full colour; the cursor presses the pins in. Use for product, tech and tactile showcases.
▶ PreviewHow it worksPictures 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.
▶ PreviewHow it worksPictures 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.
▶ PreviewHow it worksPictures 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.
▶ PreviewHow it worksPictures 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.
▶ PreviewHow it worksPictures cut into thin vertical slats lit by the scene: inactive ones stand nearly edge-on as fine grey lines, the active one turns its slats to face you in a soft wave, closing into the picture; the cursor turns the slats near it. Use for architecture, interiors and product showcases.
▶ PreviewHow it worksPictures 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.
▶ PreviewHow it worksPictures as a fine wire mesh lifted by their own brightness: inactive ones are a flat grey wire grid, the active one rises into relief and fills with colour panels behind a soft wave; near the cursor the panels lift away to the wire. Use for tech, data, architecture and engineering showcases.
▶ PreviewHow it worksPictures as topographic models of stacked card lit by the scene: inactive ones are a flat grey contour map, the active one rises into terraces of its own brightness in full colour behind a soft wave; the cursor lifts the terraces higher. Use for architecture, maps, data and craft showcases.
▶ PreviewHow it worksPictures as cut-paper layers in a shadow box, lit by the scene so each sheet casts a real soft shadow on the one behind: inactive ones are pressed flat and grey, the active one opens into depth in full colour. Use for editorial, craft, kids and storytelling showcases.
▶ PreviewHow it worksPictures as pop-up book spreads lit by the scene: cut-paper sheets hinged to a page lie folded down and grey when inactive, and stand up one after another into the picture in full colour when it becomes active. Use for storytelling, kids, editorial and craft showcases.
▶ PreviewHow it worksPictures 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.
▶ PreviewHow it worksPictures 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.
▶ PreviewHow it worksPictures as stacks of thin horizontal plates lit by the scene, each plate’s front following the picture’s brightness like a laser-cut relief: inactive ones are a flat grey stack, the active one slides forward into relief in full colour; the cursor pushes plates back. Use for architecture, product, interiors and craft showcases.
▶ PreviewHow it worksReady-to-paste React Three Fiber code and the 3DRise API are included in paid plans, inside the studio.
A primitive 3D shape (box, sphere, cylinder, etc.). The most common object type for general geometry.
36 objectsA grid overlay (cells and sections), typically on the ground plane.
24 objectsA light source illuminating the scene. Choose the kind based on directionality and falloff.
10 objectsEnvironmental elements from the world
6 objects