Add displacement prop to Radiant Lines starfield

[radiumcoders]

After the frame-rate (dt) correction, star travel collapsed so the filled heads had almost no streaks. This restores 60fps-equivalent motion and adds a displacement prop that scales how far each star jumps when warping (idle drift and scroll).

Changes

• New displacement option on the vanilla engine (default 1)
• Star travel is now warp * 2.4 * 60 * dt * displacement, matching the original 60fps feel
• Streaks are drawn with a 60fps-length tail so filled heads stay attached to visible lines at any refresh rate
• React and Svelte wrappers forward the prop; the docs demo has a Displacement slider
• Registry JSON rebuilt

Usage

<RadiantLines displacement={1.5} starCount={420} />

  

Summary by CodeRabbit

• New Features

  • Added a configurable displacement option to Radiant Lines, controlling star travel distance and streak length.
  • Added a demo slider for adjusting displacement from 0.2 to 3.
  • Supported the new option across React, Svelte, and vanilla implementations.

• Bug Fixes

  • Improved animation consistency across different frame rates.
  • Prevented unnecessary rendering of off-screen streaks.

• Documentation

  • Documented displacement behavior and its default value of 1.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 37df9475-91d7-44fc-81dd-16b0145fea54

📥 Commits

Reviewing files that changed from the base of the PR and between f124694 and e625c9f.

📒 Files selected for processing (7)

• content/docs/components/radiant-lines.mdx
• public/r/radiant-lines-svelte.json
• public/r/radiant-lines.json
• registry/radiant-lines/radiant-lines-demo.tsx
• registry/radiant-lines/radiant-lines-vanilla.ts
• registry/radiant-lines/radiant-lines.svelte
• registry/radiant-lines/radiant-lines.tsx

Included review availability: Your plan provides up to 10 included reviews per hour; 8 remain after this review.

---

📝 Walkthrough

Walkthrough

Radiant Lines now supports a configurable displacement option. The animation engine scales star travel and streak length, while React and Svelte wrappers, the demo, registry content, and documentation expose the option.

Changes

Radiant Lines displacement

Layer / File(s)	Summary
Animation engine displacement registry/radiant-lines/radiant-lines-vanilla.ts	Adds the displacement option, validation, default handling, per-second travel, and frame-rate-independent trail depth.
React and Svelte integration registry/radiant-lines/radiant-lines.tsx, registry/radiant-lines/radiant-lines.svelte, public/r/radiant-lines.json, public/r/radiant-lines-svelte.json	Passes displacement during initialization and live option updates across both wrappers and public registry content.
Demo control and documentation registry/radiant-lines/radiant-lines-demo.tsx, content/docs/components/radiant-lines.mdx	Adds the demo default, snippet prop, preview wiring, slider control, and documentation for displacement.

Estimated code review effort: 3 (Moderate) | ~20 minutes

Merge Risk: ⚪ Minimal · up to e625c

This localized change adds configurable star displacement and updates its wrappers and documentation; no actionable merge-blocking risk remains beyond normal checks and review.

Sequence Diagram(s)

sequenceDiagram
  participant Demo
  participant RadiantLines
  participant createRadiantLines
  participant AnimationEngine
  Demo->>RadiantLines: set displacement
  RadiantLines->>createRadiantLines: initialize with displacement
  createRadiantLines->>AnimationEngine: configure displacement
  AnimationEngine->>AnimationEngine: scale travel and trail depth
  Demo->>RadiantLines: update displacement
  RadiantLines->>AnimationEngine: setOptions displacement

Loading

Possibly related PRs

• radiumcoders/23rd.dev#17: Introduced shared Radiant Lines options that this change extends with displacement.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and concisely describes the main change: adding the displacement prop to the Radiant Lines starfield.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch cursor/radiant-lines-star-displacement-2704

---

_{Comment @coderabbitai help to get the list of available commands.}

[radiumcoders]

@cursoragent can u deploy this as preview

[cursor]

Preview deploy is running for PR #20. I merged the Cloudflare PR preview workflow from main into this branch and pushed; GitHub Actions is uploading a Worker version (not production).

The stable preview will be:

https://pr-20-23rd-dev.radiumcoders.workers.dev

Waiting for that Actions run to finish and post the URL on the PR. Production at 23rd.dev is unchanged.

  

[github-actions]

Cloudflare preview is ready.

Preview	https://pr-20-23rd-dev.radiumcoders.workers.dev
This commit	https://5e814998-23rd-dev.radiumcoders.workers.dev

Production (23rd.dev) is unchanged. This preview URL stays the same as you push to this PR.