Guide · Component documentation
Cursor Drift
An infinite image gallery steered entirely by the cursor. Direction from the centre of the frame sets the travel axis, distance sets the speed, and every tile leans into the vector. This guide covers setup, the three steer modes, all eight presets, and every control in the panel.
Framer code component · Version 1.0
support@premshandilya.com
Move your pointer inside the frame. Open the panel to try the presets.
Getting started
01
Open the remix link from your purchase. Framer creates your own copy of the project in your account.
02
In the Assets panel, find Cursor Drift under Code and drag it onto any page.
03
Give it a real size. The component fills its frame, so set the frame to something generous such as full width by 100vh.
04
Open the Items control and swap in your own images and captions. Add as many as you like. The track wraps infinitely in either direction.
05
Pick a preset, then tune anything you like. Presets set starting values and never lock a control.
Sizing and the frame around it
Cursor Drift fills whatever frame you put it in, so give that frame a real size. A full width section at 100vh is a good starting point, and anything above roughly 400 by 300 works.
If you already have a border or a corner radius on the frame you drop it into, remove them. Cursor Drift draws its own outline through the Border preset, and a frame border sitting on top of it makes the preset look like it does nothing. A frame that is shorter than the component will also clip that outline off at the top and bottom.
Steer modes
The steer mode decides what the pointer vector actually drives. Every mode wraps infinitely, so there is no first or last slide in any direction.
Axis
The default. The angle from the centre to your pointer becomes the track direction, so the whole strip rotates to travel on that bearing. Angle Snap quantises it to 4, 8 or 12 headings if you want it to settle cleanly.
Rail
The axis is pinned horizontal. Horizontal distance drives direction and speed, while vertical distance only tilts and lifts the strip. Closest to a conventional carousel.
Field
The same vector pans a wrapped two axis plane instead of a line. Tiles fill the frame as a grid and drift in whatever direction you point.
The eight presets
A preset sets the starting value of every control at once, including the steer mode and the border. It never locks anything. Change a slider afterwards and the preset stays selected with your value on top.
Vector Drift
The default. Full axis steering at a calm speed with a soft lean. Tall portrait tiles on a hairline border.
Magnetic Rail
Horizontal rail, quicker and tighter, with a stronger tilt from vertical pointer distance. Landscape tiles.
Compass Lock
Axis steering snapped to eight headings, so the track always settles on a clean bearing. Corner brackets instead of an outline.
Whiplash
Very fast, a tiny dead zone and a hard lean. The gallery reacts almost instantly and overshoots into the vector. No border.
Slow Cinema
Wide tiles, generous spacing, a large dead zone and a slow response. Nothing moves until you commit to a direction.
Deep Field
Two axis field mode with square tiles and a strong depth falloff, so the plane recedes toward the edges of the frame.
Ticker
A fast rail with almost no dead zone and heavy idle drift. Keeps moving on its own when the pointer leaves.
Nebula
Field mode with small rounded tiles, a heavy lean and a glowing border in the accent colour.
Border presets
Border is a single control. Each option carries its own width, radius, gap and colour, so there is nothing else to set. Glow and Brackets take the accent colour. Leave it on Preset Default to follow whichever preset you picked.
None
No outline and square corners.
Hairline
A one pixel outline at 16 pixel radius. The quiet default.
Sharp
A slightly brighter one pixel outline with square corners.
Soft
A fainter outline at 28 pixel radius.
Inset
The outline sits 14 pixels inside the edge, so the canvas bleeds past it.
Double
An edge outline plus a second one just inside it.
Glow
An outline plus an inner glow, both in the accent colour.
Brackets
Four corner brackets in the accent colour instead of a full outline.
Control reference
Every control below appears in the Framer properties panel and, where useful, in the in canvas panel as well. Leave a control empty to follow the preset.
Steer Mode
Axis, Rail or Field.
Angle Snap
Free, or quantised to 4, 8 or 12 headings. Axis mode only.
Speed
Travel rate in pixels per second at full pointer distance.
Dead Zone
How far from the centre you can sit before anything moves. Raise it for a calmer gallery.
Response
How quickly the axis and speed catch up to the pointer. Low is heavy and cinematic, high is instant.
Idle Drift
How much the gallery keeps moving on its own once the pointer leaves. Set it to zero to stop completely.
Lean
How far tiles rotate toward the pointer vector.
Skew
How far tiles shear toward the pointer vector.
Depth
How much tiles shrink as they move away from the centre of the frame.
Spacing
Gap between tiles along the track.
Tile Width and Height
Tile size in pixels. The component works out how many tiles it needs to fill the frame.
Radius
Corner radius on the tiles, separate from the Border preset.
Items
Your images and captions. Add as many as you like.
Labels and Label Font
Show the caption on each tile, and set its typeface and size.
Vector HUD
The dead zone ring, the pointer line and the live bearing and speed readout. Useful while tuning, easy to switch off.
Canvas and Accent
Background colour behind the tiles, and the colour used by the HUD, the caption numbers, Glow and Brackets.
Overlay and Box Position
Show the in canvas control panel to visitors, and choose which corner it sits in. The menu toggles below it strip the panel down group by group.
Performance and accessibility
Off screen
The animation loop stops completely when the component scrolls out of view and picks up again when it returns.
Reduced motion
Visitors who ask their system for reduced motion get no autonomous drift. The gallery only moves while they are actively pointing at it.
In the editor
The Framer canvas draws a still composed frame rather than running the loop, so your editor stays fast.
Cursor Drift · Guide
Questions? support@premshandilya.com