Slow Journal

Blog68: Slow Journal

A three-up journal index: a heading that settles in word by word beside a pill action, then post cards whose photographs drift inside their frames, each with a category and date rule, a serif title and a read link whose arrow lifts on hover.

Installation

Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.

Radix flavor

npx shadcn add "https://ui.beste.co/r/blog68?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

npx shadcn add "https://ui.beste.co/r-base/blog68?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the block to components/beste/block/blog68.tsx plus the button22 sliding-marker pill and the text1 word stagger it uses.

Quick start

The installed file exports blog68Demo alongside the block: the exact props behind the preview above. Spread it to get a working journal index in one line.

import { Blog68, blog68Demo } from "@/components/beste/block/blog68";

export default function Page() {
  return <Blog68 {...blog68Demo} />;
}

Then replace the demo with your own props. Written out, a trimmed setup looks like this:

import { Blog68 } from "@/components/beste/block/blog68";

export default function Page() {
  return (
    <Blog68
      eyebrow="Journal"
      heading="Notes from the slow lane."
      button={{ label: "Browse all writing", href: "/journal", tone: "outline" }}
      posts={[
        {
          title: "Why the first ten minutes of a session are the hardest",
          excerpt: "Almost everyone spends them apologising for not knowing where to start.",
          date: "June 2026",
          category: "Practice",
          href: "/journal/first-ten-minutes",
          image: { src: "/photos/lake.jpg", alt: "Morning mist lifting off a still lake" },
        },
      ]}
      labels={{ read: "Read" }}
    />
  );
}

Props

type Post = {
  title: string;
  excerpt: string;
  date: string;
  category: string;
  href: string;
  image: { src: string; alt: string };
};

type ActionButton = {
  label: string;
  href: string;
  tone?: "primary" | "light" | "dark" | "outline";
};

Behavior notes

• Each card carries three separate links to the same post (the image, the title and the read link) rather than one wrapper around the whole article, so the excerpt stays selectable text and the heading keeps its own accessible name.
• The read link's arrow is animated under motion-safe:, so the hover lift is dropped entirely for anyone who has asked for reduced motion, while the link itself still works.
• Every post image owns its own scroll listener, so the three photographs drift at their own moment instead of moving in lockstep, -8% to 8% against a 1.18 scale.
• Images clear from blur(24px) on decode, with a complete check on mount so a cached photograph is not left blurred waiting for an event that already fired.
• Cards enter with a 0.12s stagger by index, resolving a row left to right.
• category and date are free strings printed either side of a dot, with no parsing or formatting, so "June 2026", an ISO date or a reading time all render as given.
• Post titles are h3 under the section h2, which keeps the outline correct when this block sits below other sections on a page.