KQ-514 · TOP/RISE

Top Rise

A back-to-top control that surfaces from the bottom edge on recoil — two visible bounces, the physics of something landing — once the container has passed the threshold, and sinks away on the exit ease when the top comes back into reach. Its ring carries scroll depth, drawn with pathLength so the geometry follows the button's own box rather than a fixed radius. Pressing it scrolls to the top while the arrow lifts 4px on flick; Tab reaches it and Enter or Space presses it.

KQ-514 · TOP/RISE

Fernworks

Footbridge, third season

The third season of the Fernworks footbridge opened a week late. The delay was the anchor blocks, not the deck.

Both banks were re-poured in February. The east block took the cold badly and had to be broken out and set again, which cost nine days.

Deck boards are the same larch as the first season, cut from the same lot, and they have moved about a millimetre less than the survey allowed for.

The handrail tension is read every fortnight. Readings sit between 4.2 and 4.6 kilonewtons and have not drifted since the second week.

Foot traffic runs about 300 crossings a day in summer, half that once the light goes. Nothing in the counts suggests the deck is loading unevenly.

Winter work is limited to the drainage channel under the east approach, which silts up faster than the west and is cleared by hand.

The next full inspection is booked for the spring, before the path reopens to the campsite.

Depth 0%

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/top-rise

Props

container: React.RefObject<HTMLElement | null>; default —; The scrolling element; defaults to the window.
threshold: number; default 240; Pixels scrolled before it surfaces.
label: string; default "Back to top"; Accessible name.
onDepthChange: (percent: number) => void; default —; Fires with whole-percent scroll depth, 0–100, when the percent changes.
className: string; default —; Positioning is the caller's: absolute inside a relative frame, or fixed when the page itself scrolls.

Prop	Type	Default	Description
container	React.RefObject<HTMLElement \| null>	—	The scrolling element; defaults to the window.
threshold	number	240	Pixels scrolled before it surfaces.
label	string	"Back to top"	Accessible name.
onDepthChange	(percent: number) => void	—	Fires with whole-percent scroll depth, 0–100, when the percent changes.
className	string	—	Positioning is the caller's: absolute inside a relative frame, or fixed when the page itself scrolls.