Changelog

Latest updates and announcements.

RSS

About section, blog longform, and a testimonial grid

A stats and feature about page, a longform blog layout with a sticky author rail, and a three column testimonial grid.

  • About Section v1. Headline beside a paragraph and two feature callouts, with a stat row underneath.
  • Blog Section v2. Sticky author sidebar with avatar and GitHub link next to a longform stack of image led article sections.
  • Testimonials Section v6. Centered heading over a responsive three column grid of testimonial cards.

Introducing the lifeline portfolio

Scroll the page to move a year by year career rail, with color coded work, school, destinations, and people you met, plus stills or clips that expand from the timeline.

The third portfolio starter, drawn from github.com/evilrabbit/lifeline, installed with shadcn init --template like the others.

  • Portfolio v3. A fullscreen career lifeline for a fullstack developer, with Jon Doe filler milestones, drop in photos and videos, a footer theme switcher, and a lightbox that morphs from the rail. Inspired by evilrabbit/lifeline.

Event landing page with WebGL glow

A weekend event starter with brand first display type over an auto cycling WebGL color field, a ticket CTA into a multi step questionnaire register flow, and Base UI toasts on submit.

A second landing page template aimed at hackathons and ship weekends, installed with shadcn init --template like the waitlist and portfolio starters.

  • Landing Page v2. Full bleed WebGL glow behind a brand first hero (date badge, display title, punchline, ticket CTA), directional view transitions into /register, a multi step Questionnaire for role track and email, and ThemeProvider driven light or dark tokens for the toaster.

Blog spotlight, masonry gallery, and inverted carousel hero

The first blog section with a featured post beside a trending list, a CSS grid masonry gallery that reveals on scroll, and an inverted card hero with autoplay slides. Also release note cards, a Retro Dither CTA, static FAQ with helpfulness, a film grain footer, and masonry quote columns.

Eight new page sections spanning editorial content, social proof, and conversion.

  • Blog Section v1. Two column magazine layout with a large spotlight article and author avatar beside a staggered list of trending posts with thumbnails.
  • Gallery Section v4. Dense CSS grid masonry of mixed height photos that ease in when scrolled into view. No header copy, images only.
  • Hero Section v12. Large headline above an inverted rounded card split between copy with dual CTAs and a sliding photo stage with autoplay, prev next, and progress pips.
  • Changelog Section v2. Three card release notes with date and category rows under each title, plus a Read announcement button. Same release notes job as v1 in a card grid instead of the three column strip.
  • CTA Section v6. Centered workspace pitch over a Canvas UI Retro Dither frame with a single rounded full CTA.
  • FAQ Section v5. Stacked question and answer pairs under a last updated line, with a muted Was this helpful bar and community link at the bottom. No accordion.
  • Footer Section v4. Logo and brand name beside three link columns over a subtle film grain texture, with copyright and office line.
  • Testimonials Section v5. Badge, headline, and short intro over a three column masonry of bordered quote cards with avatars.

Waitlist landing page and three tier pricing

A Clerk powered fullscreen waitlist starter with a boiling ink print hero, plus compact three tier pricing cards with a billing switch and grouped feature lists.

The first landing page template joins the portfolio starters, installed the same way with shadcn init --template.

  • Landing Page v1. Fullscreen startup waitlist with a misregistered boiling display title over a floating hex tile cursor field on the left, and Clerk Waitlist (shadcn theme) on the right, including a keyless demo form until keys are set.
  • Pricing Section v3. Three tier cards with a monthly and yearly switch, grouped feature lists, and a centered two line headline. Same billing toggle idea as v2 in a tighter three plan layout.

A travel hero and a theme aware particle feature section

A two panel travel booking hero with a pointer driven Canvas UI Displacement image, and a features section with a left side Canvas UI ParticleObject panel that rebuilds a flat image as particles and recolors for light or dark mode.

  • Hero Section v11. Two panel travel hero with an integrated ACME nav, headline, and dual CTAs beside a full bleed destination image that ripples with Canvas UI Displacement on pointer move.
  • Feature Section v11. Left side Canvas UI ParticleObject panel that rebuilds a flat image as particles colored to match the current theme, beside a Geist Sans headline over a two by three icon and copy feature grid.

A liquid glass portfolio with notes and projects

A static personal site with hardcoded notes, projects, and experience columns, wrapped in a WebGL cursor effect that trails and warps the live page in Chromium.

A different shell from Portfolio v1: no MDX, no CMS, everything hardcoded in the page.

  • Portfolio v2. A two column intro above a three column notes, projects, and experience layout, an avatar and copy to clipboard email, dark and light themes, and a Canvas UI liquid effect that trails the pointer and warps on screen text in Chromium.

iPhone mockup, shader testimonials, and two column FAQ

A front facing iPhone 17 Pro Max device frame with image and video screen variants, a three up shader portrait testimonials carousel, and a two column FAQ with marketing copy beside a plus minus accordion.

  • FAQ Section v4. Two column layout with left side eyebrow, headline, description, and dual CTAs beside a bordered plus minus accordion.
  • Testimonials Section v4. Centered headline with dual CTAs above a three up carousel of six customer stories, each with a Paper shader portrait and Read story link.
  • iPhone 17 Pro Max (w/ image). Phone mockup with a silver titanium rail, black rounded bezel, Dynamic Island, and iOS status bar over a bundled screen wallpaper.
  • iPhone 17 Pro Max (w/ video). Same frame with a bundled screen video.

Introducing templates

Templates are full Next.js starters you install with shadcn init, beginning with a minimal portfolio for developers, writers and personal projects.

Templates sit next to blocks as a new install path: a complete Next.js app rather than a single section, installed with shadcn init --template.

  • Portfolio v1. A science themed starter for writers, set in Geist Mono for a typewriter feel, with MDX powered writing and book pages, a Saturn decoration, and a Basin contact form.

New navbars and morphing feature cards

Two navbar layouts and a feature section with a hover driven wireframe preview.

A quieter text only navbar with a Resources mega menu, an Edra inspired nav that expands the hamburger in place, and feature cards that morph a wireframe on hover.

  • Navbar Section v9. Text brand mark, nav links, and an outline Sign in button with a full width Resources mega menu.
  • Navbar Section v10. Hamburger expands into a dialog card of primary and footer links.
  • Feature Section v10. Dashed corner accent cards next to a wireframe preview that updates on hover.

Vertical brands and a quiet CTA

A brands section with scrolling logo columns beside the copy, plus a simple centered call to action.

  • Brands Section v8. Headline, description, and CTA on the left. Four vertical logo marquees scroll in alternating directions on the right.
  • CTA Section v5. Centered muted background with a headline and a rounded pill button.

Dual marquees, story grid, and Studio Display

Opposite scrolling pill marquees, a four card success story grid, and Mac Studio Display mocks with image or video.

  • Brands Section v7. Serif headline over dual row pill marquees of dev and infra logos scrolling in opposite directions.
  • Testimonials Section v3. Four card bento of success stories with company wordmarks and Read story links.
  • Mac Studio Display (w/ image). Monitor mockup with a bundled screen wallpaper.
  • Mac Studio Display (w/ video). Same frame with a bundled screen video.

Finance hero, underline nav, and dark FAQ

An Altitude inspired navbar, a request demo hero, stacked stats rows, and a dark numbered FAQ.

  • Navbar Section v8. Three column navbar with animated underline links, inspired by Altitude.
  • Hero Section v10. Finance focused headline with a single Request demo CTA.
  • Stats Section v3. Full width rows with an info icon and oversized value, separated by dividers.
  • FAQ Section v3. Dark background with a serif headline, italic subtitle, and numbered chevron rows.

Pricing with a billing toggle

Four tier pricing with monthly and yearly billing, paired with a left aligned FAQ for billing questions.

  • Pricing Section v2. Four tier grid with a monthly and yearly billing toggle and per tier feature lists.
  • FAQ Section v2. Left aligned accordion with plus and minus icons and billing focused copy.

Grain shader CTA and icon features

A full width GLSL grain background behind a CTA, and a four column feature grid with grain sphere cards.

  • CTA Section v4. Dark GLSL grain behind a centered title and dual action buttons.
  • Feature Section v9. Left aligned serif headline above four Phosphor icons on grain sphere card backgrounds.

Introducing Gallery Section

Ten side by side panels that expand on hover or focus. Inspired by phlntn.com.

  • Gallery Section v1. Expandable panels with animated vertical indicator lines and bundled landscape photography.

Live dashboard hero and product mocks

A hero with a simulated product dashboard next to dual CTAs, plus four bordered feature cards with copy driven mocks.

  • Hero Section v9. Dual CTAs beside a live product dashboard with ticking metrics, a streaming chart, and workflow tasks.
  • Feature Section v8. Bordered four card grid with dot pattern slots and copy driven product mocks.

Testimonials, device mocks, and auto install media

Quote carousels and bordered testimonials, MacBook and Chrome video mocks, and block media that installs with shadcn add.

This release adds testimonials, more device mocks, and navbar and feature layouts for AI SaaS. Block images and video now install automatically with shadcn add. You no longer need to copy assets into public/ by hand.

  • Hero Section v8. Pixel art scene preview, brand carousel, and a centered Simple Chatbot prompt overlay.
  • Navbar Section v7. AI SaaS navbar with Product and Developers dropdowns and a Get started CTA.
  • Feature Section v7. Three column cards for agent workflows, grounded knowledge, and production deploys.
  • Testimonials Section v1. Horizontal quote carousel with initials avatars and chevron navigation.
  • Testimonials Section v2. Three column bordered quotes with serif italics, square avatars, and company wordmarks.
  • MacBook Pro (w/ image). MacBook Pro frame with a bundled screen wallpaper.
  • MacBook Pro (w/ video). Same frame with a bundled screen video.
  • Google Chrome (Windows, w/ video). Windows Chrome mock with video under the omnibox.

FAQ, Chrome mocks, and dock nav

The first FAQ section, macOS and Windows Chrome frames, a spreadsheet mock, a shrink on scroll dock nav, and an auth brands marquee.

A larger drop built around mockups and first FAQ, with dock and mono navbar options and an authentication brands strip.

  • Hero Section v7. Serif headline, mono description, flip pill CTAs, and a food delivery demo above an auth brands marquee.
  • Brands Section v6. Security trust strip of auth brand logos including Clerk, Better Auth, Auth0, and more.
  • FAQ Section v1. Centered minimal FAQ with a clean divider accordion.
  • Navbar Section v5. Sticky top dock that shrinks on scroll, with a frosted pill and two column desktop layout.
  • Navbar Section v6. Centered mono uppercase nav with a Solutions dropdown and external Docs link.
  • Google Chrome (macOS). Tab strip, omnibox, bookmarks bar, and a light and dark new tab preview.
  • Google Chrome (Windows). Win32 title bar tabs and native window controls.
  • Spreadsheet. Sheets style subscription grid with trial upgrades and Stripe webhook row sync.

Bento features, cleaner footer, and dither CTA

A four card bento feature grid, a simpler card footer with Privacy and Terms, and a CTA over Paper Dithering.

  • Feature Section v5. Four card bento on muted surfaces with balanced title and body typography.
  • Footer Section v3. Card wrapped footer with a logo column and a Privacy and Terms bottom bar.
  • CTA Section v3. Full bleed Paper Dithering behind the headline with primary and outline buttons.

Introducing navbars

The first navbar blocks and a five column card footer.

Three navbar shells and a denser footer for site chrome.

  • Navbar Section v1. Sticky blurred header with demo content below for scroll testing.
  • Navbar Section v2. Centered three column shell with a product dropdown, frosted backdrop, and full screen mobile sheet.
  • Navbar Section v3. Same shell as v2 with a different link set and no product mega menu.
  • Footer Section v2. Card footer with five link columns including Connect.

Introducing pricing tables

The first four tier pricing table, with a screenshot hero, industrial feature grid, and boxed trusted by marquee.

Pricing lands in the library for the first time, alongside a product screenshot hero and a sharper trust strip.

  • Pricing Section v1. Four tier grid with plan highlights and primary CTAs.
  • Hero Section v6. Dual CTAs over a product screenshot with a brands strip below.
  • Feature Section v4. Three card industrial grid with data first copy.
  • Brands Section v5. Boxed trusted by strip with greyscale logos in a sharp marquee.

Feature illustrations and the changelog strip

Theme aware feature cards for funnel metrics, plus the three column changelog pattern used on this page.

  • Feature Section v3. Numbered headline with illustrations for funnel health, friction, and experiment impact.
  • Changelog Section v1. Three column strip with monospace dates, entry titles, and excerpts.

Chatbot hero, live npm stats, and SVG features

A hero with an embedded Simple Chatbot, live npm download charts for infra brands, and a four card SVG feature grid.

  • Hero Section v5. Headline and CTA above an embedded Simple Chatbot prompt card with an animated typing placeholder.
  • Stats Section v2. Live npm downloads for six infra brands with a combobox driven trend chart.
  • Feature Section v2. Four card grid with SVG illustrations that animate in on scroll.

Hover brand colors and flip feature cards

Brand grids that reveal color on hover, an always on color variant, and a cream six cell flip card feature section.

  • Brands Section v3. Muted logos by default. Hover reveals full brand color, an inset border, and a flickering grid.
  • Brands Section v4. Always on brand colors and flickering grid with no labels.
  • Feature Section v1. Six cell cream grid with flip cards that reveal their description on hover.

Package install tabs and How it works

A tabbed package manager code block, plus scroll stagger steps and a GSAP beam timeline.

  • Code Block. Tabs for npm, pnpm, yarn, and bun with syntax highlighted output and one click copy.
  • How It Works Section v1. Three step process with top border step numbers that stagger in as you scroll.
  • How It Works Section v2. Timeline variant where a GSAP beam travels between week badges to reveal each step.

Chat heroes and chat mocks

A five star rating strip, heroes that embed chat previews, and standalone Chat Bot and Simple Chatbot integrations.

  • Stats Section v1. Centered five star rating row with a social proof label underneath.
  • Hero Section v3. Badge, headline, and CTA above an embedded chat preview with typing and suggestions.
  • Hero Section v4. Dual CTA buttons paired with the new stats strip below the fold.
  • Chat Bot. Simulated AI chatbot with typing animation, message bubbles, and a looping Q and A exchange. No avatars, pure bubble UI.
  • Simple Chatbot. Prompt card with rotating SaaS style placeholders and a toolbar for add and voice actions.

CTA variants and the first footer

Split and centered call to action layouts, plus a muted rounded footer with four link columns and socials.

  • CTA Section v1. Headline and description on the left, two action buttons on the right, and a full width image frame below.
  • CTA Section v2. Centered layout with an oversized headline and a single square corner download button.
  • Footer Section v1. Muted rounded footer with brand copy, four link columns, and Instagram and TikTok links in the bottom row.

Event stream hero

A two column hero with a live webhook stream on the right, plus the same animation as a standalone integration.

  • Hero Section v2. Headline on the left and a live event stream on the right, staged in with a GSAP timeline on mount.
  • Event Stream. Standalone version of that animation. Three webhook events type out in sequence with an edge fade, frameless so it drops into any section.

Introducing the library

The first three blocks. A two column hero, an AI brands marquee, and a typed shadcn add terminal demo.

The first three blocks in the library.

  • Hero Section v1. Two column headline and CTA with a brands marquee strip and an animated macOS terminal integration demo.
  • Brands Section v1. Compact trust strip with an infinite marquee of AI brand logos in light and dark mode.
  • Mac OS Terminal. macOS Terminal window mock with a zsh prompt and a typed shadcn add demo.