Landing: Tracwell stats charts, sponsor tiers, and a shader footer - #41
Merged
Merged
Conversation
Installed with `npx skills add bklit/bklit-ui --skill bklit-ui`. Only the consumer skill is taken; the package's other skills are for bklit's own monorepo.
Adds the @bklit registry (now served from bklit.com) and pulls the three charts in as source under components/charts. Two fixes on top of the CLI output: its theme tokens landed as var(----chart-*) and three of them referenced themselves, and ChartLoadingLabel imported shimmering-text from a path that doesn't exist. The d3 type packages it needs are added as dev dependencies. The vendored chart code trips the React Compiler lint rules, and `shadcn add --overwrite` would undo any local fixes, so ESLint skips it.
The stats section returns below the first screen with four charts fed by Tracwell's MCP server: - Visitors online, drawn as a live line chart. Counts unique visitors seen in the trailing five minutes, sampled each minute over the last half hour from Tracwell's event stream. The card polls /api/live-visitors every 20s while it's on screen, and the route is cached for 15s so viewers share reads. - Visitors per day over 30 days, as an area chart with today's partial day dashed and the peak day labelled. - Top referrers and most-copied components, as horizontal bars with names and counts drawn beside them (BarYAxis caps labels at 70px). The 30-day numbers now refresh every 10 minutes instead of hourly.
Below the stats: Shadcn Labs as the sponsor, Tracwell as the analytics platform sponsor, and an open "Your logo here" slot. The open slot and "Become a sponsor" link to GitHub Sponsors. TracwellCard now exports its logo and a UTM link helper so both can share them.
The full-width banner with a large logo overstated the sponsorship. It's now a centered card the size of a platform card, with a 16px logotype.
The footer mirrors the first screen: the same inset rounded frame over the evil shader and top scrim, so the page opens and closes on the red smoke. A nav row (Home, Docs, Sponsor, GitHub, X) sits above an oversized "Evil Buttons." wordmark, with copyright, sitemap, robots.txt, llms.txt and an Apache 2.0 badge along the bottom. ShaderBackdrop and TopScrim move to their own module to be shared, and the scrim's gradient id now comes from useId so two can coexist.
The component and its TracwellCard export went out with the previous commit; this drops the leftover render and import from the home page.
The footer is now a screen-tall inset frame with the same even gap on every side as the hero. The gap moves from margin to padding, since the scroll container dropped the footer's bottom margin and pinned its edge to the window. The hairline above the nav row goes, and the row takes the hero navbar's 64px height.
The footer is back to its 30rem / 38rem minimum instead of a full screen, and it no longer repeats the navbar. The padded bottom gap stays.
Drops the card, its /api/live-visitors route and the event-stream reader behind it, and the vendored live line chart. Visitors per day now spans the full width.
Three tiers under the stats, with cards that shrink tier by tier: one Mythic slot, two Legendary, and Shadcn Labs in the base Sponsors tier. Each open slot reads "DM me if you're interested" and opens x.com/radiumcoders until there's a proper sponsor page. Rows are centered flex, so a tier that isn't full still sits balanced.
Clicking an open slot opens a dialog on that slot's tier, with a switcher to compare the others: - Mythic (1 spot): landing hero, OG image, shout-outs on X, the full-width card, first on every docs page, top of the README. - Legendary (2 spots): landing hero after Mythic, a thank-you post on X, a half-width card, docs and README. - Sponsor: a compact card, a smaller logo in the docs, and the README. No hero spot. Shadcn Labs sits in the base tier but keeps its hero spot as the founding sponsor. Its card now says so, and so does the Sponsor tab. The dialog's call to action is a DM on X, and its pitch quotes the 30-day visitor count when Tracwell has it. Tiers live in sponsor-tiers.ts so the section and the dialog share them.
Mythic is $200/month, Legendary $100/month, and Sponsor $100 one-time.
The dialog leads with the price in the pixel display face and shows each
tier's price in the switcher.
Each tier now has an accent color (brand red, gold, neutral) that
tints a glow over the landing's pixel grid at the top of the dialog, the
selected tab, the spots pill and the checkmarks. The glows crossfade on
switch. The title picks up the hero's pixel "Evil", and the call to
action names the tier ("DM me about Mythic"). The body scrolls on short
screens while the footer stays pinned.
The static glow and grid behind the dialog's header give way to a WebGL2 dither shader adapted from @isabruy's on OpenShaders (credited in the file). Its hue, hue spread, chroma and lightness are now uniforms, so each tier gets its own palette (red for Mythic, gold for Legendary, silver for Sponsor) and switching tiers eases between them. It pauses off screen, respects reduced motion, and falls back to the CSS glow without WebGL2. A scrim keeps the left-aligned heading legible. The DM button now fills with the tier's color and has a soft glow, an inset highlight and an arrow that nudges on hover. Sponsor uses the site's primary black/white rather than a grey that read as disabled.
The masked WebGL canvas escaped the dialog's rounded overflow clip in some browsers and painted square corners over the border. The shader layer now clips itself with a matching rounded clip-path.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Navigate logical layers of code changes, visualize relationships, and explore their blast radius. Note Currently processing new changes in this PR. This may take a few minutes, please wait... ⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Advanced Run ID: ⛔ Files ignored due to path filters (1)
📒 Files selected for processing (96)
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
radiumcoders
force-pushed
the
landing-analytics-charts
branch
from
September 30, 2026 11:09
2ffcedd to
8a53896
Compare
2 tasks done
This branch was successfully deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Three new sections below the landing's first screen.
Stats, charted with Bklit UI
The stats section is back on the home page, fed by Tracwell's MCP server and refreshed every 10 minutes:
Charts come from the
@bklitregistry (now served frombklit.com) and are vendored undercomponents/charts/. That code breaks the React Compiler lint rules, andshadcn add --overwritewould undo local fixes, so ESLint skips the folder. Thebklit-uiagent skill is added under.claude/skills/.Sponsors
Three tiers under the heading "Evil Buttons is backed and supported by the finest". Cards shrink tier by tier:
Shadcn Labs sits in the Sponsor tier as the founding sponsor and keeps its hero spot. Its card and the Sponsor tab both say so.
Platform sponsors sit below the paid tiers: Tracwell as the analytics sponsor, plus an open "Offer your platform" slot that goes straight to a DM on X. They give a service rather than money, so they aren't part of the pricing dialog.
Each open slot opens a dialog on its tier, with a switcher, the price in the pixel display face, and the perk list. The dialog's header uses a WebGL2 dither shader adapted from @isabruy on OpenShaders (credited in the file), recolored per tier: red, gold, silver. It pauses off screen, respects reduced motion, and falls back to a CSS glow without WebGL2. The call to action ("DM me about Mythic") fills with the tier's color and opens x.com/radiumcoders.
Tiers, prices and perks all live in
components/landing/sponsor-tiers.ts.Footer
An inset rounded frame over the same evil shader as the hero, so the page opens and closes on the red smoke. It shows an oversized "Evil Buttons." wordmark, then copyright, sitemap, robots.txt, llms.txt and an Apache 2.0 badge.
ShaderBackdropandTopScrimmoved tocomponents/landing/shader-backdrop.tsxto be shared, and the scrim's gradient id now comes fromuseId.Before merging
TRACWELL_MCP_KEYmust be set in Vercel. Without it the charts are left out and only the stars and components tiles show.0b00c7f) doesn't build on its own; the next commit fixes it.Test plan
pnpm lint,pnpm typecheck,pnpm registry:test,pnpm build