Orbit Rail Free
Quick guide

A free interactive Framer gallery with a curved image rail, drag navigation, keyboard controls and a focused project view.

Open the interactive local example   Component source

Install in Framer

Insert the official OrbitRail component into your own Framer project. The complete source method below is also included.

Install from the source file

1. Extract the complete ZIP and open OrbitRail.tsx in a plain-text or code editor.
2. In your own Framer project, create a new code file named OrbitRail.tsx. Replace its initial example with the entire supplied source and save.
3. Insert the resulting component on the canvas. Start at a generous desktop width, then resize it to your phone breakpoint. The component uses automatic content height.
4. Use the right-hand property controls to change Heading, Introduction, colours and fonts. Open Studies to replace each title, caption, description, image and optional project link.
5. Keep a short collection. One to eight studies are supported. The three original examples are already embedded for a useful first view.
6. Preview the page. Check your replacement images, reading order and real project links before publishing.

Use the component

• Horizontal pointer drag with a deliberate threshold
• Previous / Next with disabled boundaries
• Study tabs with Left / Right / Home / End
• Selected project detail, optional link, Escape, focus trap and return to the opening control
• Pause transitions and reduced-motion CSS
• Independent heading, introduction, palette, fonts and up to eight item controls

Local example

The included index.html works with local images and scripts. Keep demo.js, demo-config.js and the assets folder beside it. “Try your own content” lets you change the heading, first title, first image, accent and optional first link in the local preview. Restore example content reloads the original example. In Framer, make the same changes with the component's native property controls.

Images and links

Three original fictional AI-assisted artwork studies are provided as PNG originals and smaller JPEG web files. They are replaceable raster artwork, not vectors or 3D models. The component's inline JPEG defaults need no external image service. Replace an image with your own in Framer for the final site. Optional project links remain hidden while empty. Add a real destination before showing one.

Motion and keyboard

Transitions respond to your actions. Pause transitions removes them. The component also responds to the device's reduced-motion preference. Focus the study tabs to use Left / Right, Home and End. The buttons provide the same navigation as dragging. Escape closes the detail view and returns focus to its opening control.

Use and support

Free commercial use covers multiple completed personal or client projects. Attribution is optional. The original editable component and standalone assets may not be resold or redistributed as another pack. See LICENSE.txt for the complete terms.

Support covers access and reproducible supplied-file defects. The guide handles setup. Custom artwork, site editing and individual lessons are outside this free download.