Trace Board Free
Quick guide

A free interactive Framer clue board with movable images, keyboard positioning, reading-order controls and connected project notes.

Open the interactive local example   Component source

Install in Framer

Insert the official TraceBoard 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 TraceBoard.tsx in a plain-text or code editor.
2. In your own Framer project, create a new code file named TraceBoard.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 Clues to replace each title, label and connection, description, image and optional project link.
5. Keep a short collection. One to six clues 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

• Pointer or touch dragging of individual clues
• Arrow keys for positioning, Shift for a larger step and Home for one-clue reset
• Reading-order controls with disabled boundaries
• Reset the entire board and reading order
• Selected clue, relationship line and live feedback
• Detail view with Escape, focus trap and return
• Independent heading, introduction, palette, fonts and up to six 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 an image clue to move it with the arrows. Shift moves farther. Home restores that clue. Earlier / Later controls change the story order. Reset layout restores the original board. Use Move left, Move right, Move up and Move down to reposition the selected clue with a single click or tap. 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.