aniqa.dev
← Archive16 / 16

Lab noteNo. 16

Rflect Landing

The landing page for rflect. It walks through each command as a terminal session you scroll through.

Made
Jan 2025
Type
Landing page
Stack
React / Vite / Framer Motion
Links
Live ↗Code ↗
The Rflect landing page in dark mode: “Journal without leaving your terminal.” beside a terminal window running rflect write, with an npm install command below.
Click the screenshot to open the live siterflect.aniqa.dev ↗

Why I built it

A CLI is hard to show off, so it needed a page that shows it working.

What I learned

  1. Data-driven sections: each window renders from one object, so adding a command means adding one entry.
  2. CSS scroll snapping sets the pace, and Framer Motion reveals each terminal as it arrives.
  3. The live star count and version come straight from the GitHub and npm APIs.
  4. Respecting reduced motion across every animation with Framer Motion’s MotionConfig.

Revisited

  1. Oct 2026: redesigned around scroll-snapped windows with a progress rail, with terminal demos rewritten to match the real CLI output.