← Back to the demo
How to use Vanewall
A wall of vertical three-sided prisms. Each vane shows a slice of your image, and when the wall turns a wave travels across it and the next image arrives. Hidden faces are refilled before every turn, so three faces carry any number of frames. No 3D files, no video, no libraries.
Quick start — 2 minutes
1 · Drag Vanewall onto the canvas. It arrives with three demo images, so you see it working straight away.
2 · Open Slides in the properties panel and replace the images with yours. Add as many frames as you like.
3 · Pick a Mode: Autoplay, Scroll or Manual. For Scroll, set the layer's Height to Fit Content.
4 · Optional: turn on Intro card for an opening frame with your name, and Caption bar for the counter and titles.
The three modes
Autoplay — turns by itself
Works at any size. Every sets the pause between turns, Turn the length of one turn, Stagger the delay between neighbouring vanes. Direction picks the side the wave starts from, including from the cursor. Pause on hover is off by default, so the wall keeps moving while the cursor tilts it.
Scroll — the page turns it
The section pins to the screen and page scroll scrubs the wave, so stopping leaves the vanes mid-turn and scrolling back turns them back. Set Height to Fit Content. Scroll / frame sets how much scrolling one turn takes, Wave spread how long the wave is, Smoothing the glide after the wheel stops, and Snap to frame whether it settles on a frame.
Manual — you turn it
Nothing moves on its own. Drag or swipe, press the left and right arrow keys, or click. A click opens the frame's link when one is set.
Every setting
Slides — image, title, meta and link per frame. Title and meta show in the caption bar; the link is what a click opens.
Layers — optional. Layer 1 replaces slide 1, layer 2 replaces slide 2, and so on. Use a Framer layer when a frame needs a CMS-connected image, a video or a designed composition. Keep Vanes at 12 or fewer with layers, since each layer is drawn once per vane.
Intro card — an opening frame in front of your images: card title set as large as it fits, a smaller script line above it, two label blocks, fill and ink colours, and three font pickers.
Vanes — how many prisms the wall is made of, with separate counts for tablet (below 1024px) and phone (below 600px). Fewer vanes read as a card flip, more read as a billboard.
Look — Cursor tilt and its radius, Perspective, Shading, Sheen, Gap and Background.
Caption bar — counter, title, meta and progress ticks along the bottom, with its own ink and two fonts. Below 600px it keeps the counter and title only.
Click opens link — on, a click opens the link of the frame on screen. On the intro card, a click opens the first frame instead.
Recipes
Full-screen portfolio hero — Scroll, Height Fit Content, Intro card on, Caption bar on, Vanes 18, Scroll / frame 90.
Banner that never stops — Autoplay, fixed height 360–480, Vanes 12–16, Every 2.4s, Caption bar off.
Card flip — Manual, 420×560, Vanes 4–6, Shading 0.6, Cursor tilt 18.
Client logos — Autoplay, Vanes 8, Gap 2, Background set to your page colour, Shading 0.5.
One CMS image per frame — put an Image layer on the canvas, connect it to your CMS field, then add it to Layers. Repeat per frame and keep those layers off-canvas.
If something looks off
Scroll mode looks short on the canvas — that is correct, it shows one screen there. Check it in Preview.
The page doesn't scroll through the frames — the layer's Height must be Fit Content, and the component must sit in the page's normal flow, not inside a fixed-height frame.
Thin lines between vanes while turning — raise Gap to 1 or 2 so the seam reads as intentional, or raise Shading. At rest the wall shows one flat frame, so no seams appear.
Images look cropped — frames fill edge to edge, so tall images lose their sides on a wide wall. Use images close to the wall's own ratio.
Heavy on an older phone — lower Vanes (phone) to 5, turn Sheen off, and keep Layers empty.
Accessibility and performance
Reduced motion is respected: frames switch instantly instead of turning. Focus the wall and use the left and right arrows, or Enter to open the link. It is announced as a carousel with the current frame's title.
One animation loop, transforms only. It stops when the section is off screen or the tab is in the background, and images lazy-load through Framer's responsive srcset.
Questions or a problem? Reply to your purchase receipt and I'll help.