# Pinned homepage, related libraries, and pricing on library pages · PR \#42 · screen/col

[View on GitCafe](https://git.cafe/screen/col/pull/42)

Repository: [screen/col](https://git.cafe/screen/col)

Visibility: public

State: merged

Source repository: screen/col

Source branch: feat/pinned-homepage

Target branch: feat/minimal-homepage

Head commit: dacdbd02b39a90298e163e1e5ff0cd9bf1d9023b

[Discussion and reviews](https://git.cafe/screen/col/pull/42)

[Commits](https://git.cafe/screen/col/pull/42/commits?format=markdown)

[Files changed](https://git.cafe/screen/col/pull/42/diffs?format=markdown)

## Description

---

Stacked on #41. Review that first; this PR only shows the changes on top of it.

## Homepage as one pinned screen
- The hero, the details bento, and the roadmap with the footer are scenes on a sticky stage. They crossfade as you scroll while the light rays, orbit, and tiles stay put; the scenery dims and the rays pause once you leave the hero.
- An IntersectionObserver on one marker per scene picks the current scene. Nothing runs per scroll frame.
- Tabbing into another scene scrolls to it, and content stays in reading order for screen readers.
- Screens under 1280x800 and reduced motion keep the normal stacked page.
- `LibraryExplorer` and `HeroStage` are now `HomeHero` (`HeroBackdrop`, `HeroCopy`) and `HomeStory`. `LightRays` gains a `paused` prop.

## Library pages
- **Related libraries** (closes #2): each page ends with up to three *Alternatives* (same category) and three *Pairs well with* (other categories sharing a use case or tag), limited to libraries that fit the same framework. The logic is in `lib/related-libraries.ts`.
- **Pricing:** every library records whether it is free or free with paid extras, its license, and the official page that says so, checked against each project's own pricing and license pages. Paid extras and community collections such as 21st.dev get a short notice under the description, and the side card gains a Pricing chip. Exact prices are left out because they change often.
- **Side card:** it now sticks exactly where it starts instead of sliding up about 50px first.

## Worth a look
- PrimeVue 5 is no longer MIT. Its PrimeUI License is free only for individuals, nonprofits, and small companies; larger organizations need a commercial license.
- A few pricing entries were harder to verify (Chakra UI Pro and Cult Pro sale terms, Park UI, Bencho, Spell UI, Rare UI) and are worth a spot-check.
- I haven't tested the pinned homepage in a browser. Check that the Details scene fits at 1280x800.

## Tests
- `npm run typecheck` passes.
- `npm test` passes all 41 tests: the build plus unit tests for the scene query sync, related libraries, and pricing data on every library.

🤖 Generated with [Claude Code](https://claude.com/claude-code)


<!-- This is an auto-generated comment: release notes by coderabbit.ai -->

## Summary by CodeRabbit

* **New Features**
  * Library detail pages now show pricing models, license information, official links, community-collection notes, and related libraries.
  * The homepage presents its content as a scroll-guided story on larger screens, with a stacked layout on other screens.
  * Added pricing details for a wide range of libraries.
* **Style**
  * Improved library detail spacing and layout, with reduced-motion support for related-library icons.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->