Table of Contents

A scroll-spy outline with a proximity-focus animation — the active heading blooms.

Source ↗

Introduction

A copy-paste component library with one unified, soft, rounded style. Scroll this panel and watch the outline on the right bring the current section into focus.

Installation

A copy-paste component library with one unified, soft, rounded style. Scroll this panel and watch the outline on the right bring the current section into focus.

Usage

A copy-paste component library with one unified, soft, rounded style. Scroll this panel and watch the outline on the right bring the current section into focus.

Styling

A copy-paste component library with one unified, soft, rounded style. Scroll this panel and watch the outline on the right bring the current section into focus.

Motion

A copy-paste component library with one unified, soft, rounded style. Scroll this panel and watch the outline on the right bring the current section into focus.

Accessibility

A copy-paste component library with one unified, soft, rounded style. Scroll this panel and watch the outline on the right bring the current section into focus.

FAQ

A copy-paste component library with one unified, soft, rounded style. Scroll this panel and watch the outline on the right bring the current section into focus.

As you scroll, the heading you're reading grows and brightens while neighbours shrink and fade — the same focus motion used in this site's own "On this page" sidebar.

Installation

npx lily-svelte@latest add toc

Installs the style saved in lily.json. For a new Diamond project, run lily-svelte init --style diamond first.

← Table Tabs →

Built by levish. The source code is available on GitHub.

Quiet by design.