Deboss · User guide
Everything Deboss can do.
Deboss is a rail of artwork that dents toward your cursor. Hover any frame and the image warps locally around the pointer, a magnetic depression inside the picture plane with real light catching the dip. The frame itself never moves. This page covers every preset, every warp mode and every control, with live rails you can hover.
8 presets · 4 warp modes · 32 controls
How it works
Deboss renders the whole rail in WebGL. Each frame is a textured quad, and the dent is applied per pixel inside that quad rather than as a transform on the frame. The pointer becomes a falloff field: pixels near the cursor sample from further out, pixels beyond the radius are untouched. That is why the outline of every frame stays perfectly still while the picture inside it gives.
The field
Radius and Falloff decide how far the dent reaches and how sharply it fades to nothing at the edge.
The light
Depth reads the slope of that field and shades it, so the dimple catches light instead of reading as a flat smear.
The colour
Chroma splits the red and blue channels along the displacement, adding a lens edge to the rim of the dent.
Quick start
Five steps from a blank page to a working rail.
1 · Drag it in
Find Deboss under Code in the Assets panel and drop it onto any page.
2 · Size it
Give it a full width and a fixed height. Around 600 to 800 pixels tall reads best, since the frames size from the height.
3 · Add artwork
Open the Artwork list and swap in your own images and titles. Add as many frames as you like.
4 · Pick a preset
Start from a preset, then tune anything you want. Presets set starting values and never lock a control.
5 · Check the feel
Radius and Strength do the heavy lifting. Everything else is refinement.
Warp modes
The mode decides what the field does to the pixels it reaches. Every mode shares the same radius, strength and falloff.
Pinch
Pixels are pulled toward the cursor, compressing the image into the dent. This is the classic deboss and the default.
Bulge
The inverse. Pixels push away from the cursor so the surface swells outward, like glass pressed from behind.
Ripple
Concentric rings travel out from the pointer. Rings sets how many crests fit inside the radius.
Swirl
The field rotates instead of displacing radially, twisting the image around the cursor.
Presets
Eight starting points, each a different balance of reach, strength, lighting and colour. All of them stay fully editable, and moving a slider afterwards keeps the preset selected rather than resetting it.
Magnet
The default dent. A medium radius with a clean gaussian falloff and gentle lighting.
Bulge
Wider and softer, pushing outward instead of pulling in.
Ripple
A wide field with nine rings travelling out from the pointer.
Vortex
A tight rotational twist with a sharper falloff edge.
Liquid Chrome
Maximum depth and a heavy colour split. The most physical of the eight.
Paper Dent
Barely any displacement, almost all lighting. Reads as a thumbprint pressed into card.
Heat Haze
A small fast ripple with a slow autoplay drift, like air over tarmac.
Ghost
A very wide, very soft field with a lagging cursor and strong dimming.
Isolate
By default the falloff field is measured across the whole rail, so a cursor near the edge of one frame bleeds a little of the dent onto its neighbour. Turn Isolate on and the field is clipped to whichever frame the pointer is inside, giving a hard boundary at every gap. Rail feels more like a continuous surface. Item feels like separate objects.
Control reference
Everything in the properties panel, grouped the way it appears.
The dent
Preset
Eight starting points plus Custom. Always the first control.
Warp
Pinch, Bulge, Ripple or Swirl. Preset Default follows whichever preset is selected.
Radius
How far the dent reaches, in pixels. 40 to 600.
Strength
How far pixels move. 0 is flat, 1 is extreme.
Falloff
The shape of the edge. Low is broad and soft, high is a tight crater.
Rings
Ripple only. How many crests fit inside the radius.
Depth
Lighting inside the dent. This is what makes it read as three dimensional.
Chroma
Colour split at the rim, from a hint to a heavy prism.
Isolate
Clip the field to the hovered frame instead of the whole rail.
The rail
Item Height
Frame height as a percentage of the component height.
Aspect
Frame width relative to its height. Below 1 is portrait.
Gap
Space between frames, in pixels.
Corner
Corner radius on every frame.
Backdrop
The colour behind the rail.
Motion
Follow
How quickly the dent chases the cursor. Low values lag behind for a heavier feel.
Drift
Autoplay travel in pixels per second. Negative runs the other way.
Momentum
How long a throw keeps gliding after you let go.
Smoothing
How much the rail eases toward the scroll target. 0 is instant, 1 is a long glide.
Loop
Wrap the rail endlessly, or stop at the first and last frame.
Style
Dim
How far unfocused frames desaturate and darken while you hover.
Caption
Show the title of the hovered frame.
Caption Colour
Caption text colour.
Caption Font
Full typography control for the caption.
Overlay
Overlay
Show the in canvas control panel to your visitors.
Box Position
One of five corners for the panel.
Menu toggles
Upload, Preset, Warp, Rail, Motion and Style groups can each be hidden per instance.
The control panel
Deboss ships with an optional panel that renders on the canvas for your visitors, not just for you in the editor. It is off by default. Turn Overlay on to let people try presets and modes themselves, which is what the demos above are doing. Every knob in the panel also exists in the properties panel, so you never have to use it if you would rather set things once and hide it.
Positioning
Five placements. Panels in a bottom position open their dropdowns upward so they never run off the frame.
Trimming
Each group is a separate toggle, so you can ship a panel with only the preset picker if that is all you want exposed.
Scrolling
The panel never grows taller than the component. If there are more rows than fit, the body scrolls inside itself.
Good to know
Performance
The render loop stops entirely when the component scrolls off screen and starts again when it returns. A page with several rails only ever runs the visible one.
Reduced motion
Autoplay drift and the ripple clock freeze when a visitor has reduced motion enabled. The hover dent still responds, since that is a direct answer to their own pointer.
In the editor
The canvas shows a real static frame with your artwork laid out and a hint of the dent, so you can lay out a page without the effect running.
Images
Anything you upload through Framer works. External images need to allow cross origin requests, which almost all image hosts do.
Touch
There is no hover on touch devices, so the rail stays undented and behaves as a normal drag gallery. Autoplay drift is a good idea if mobile matters to you.
Anything not working?
Email support@premshandilya.com and I will fix it fast. Updates are free for life, and your remix link always carries the newest build.