@smicolon/fasla-ui 0.6.0 → 0.8.0

package/registry/blocks/hero-wave-band/HeroWaveBand.tsx

@@ -0,0 +1,309 @@
+"use client"
+
+import * as React from "react"
+import { ArrowRight, ArrowUpRight } from "lucide-react"
+import { cn } from "../../../src/lib/utils"
+import { buttonVariants } from "../../ui/button/button"
+
+/*
+ * Figma: `Hero` (46552:249264), Type=Wave Band Hero.
+ *
+ * A centred pitch over a band of colour: a pill announcing the project is
+ * open source, with a link to its code, the headline, a paragraph and two
+ * buttons. Under them two `success` sleeves sweep in from the edges and meet
+ * at a handshake, a cut-out photo, each sleeve ending in a `foreground` cuff
+ * with two buttons. A short caption rides each sleeve, tilted with it. A
+ * trust strip closes the block: a line about the customers and a row of
+ * text wordmarks, under a 1px rule.
+ *
+ * Desktop draws the band 1440 × 480 across the block's full width, starting
+ * 24px above the foot of the buttons, with the strip laid over its lower
+ * part. Tablet draws it at half that size, 720 × 240, between the copy and
+ * the strip. Mobile scales the same drawing to about 39%, centred and cut at
+ * the content's edges, drops the captions, stacks the buttons at full width
+ * and puts the wordmarks under the line, wrapping.
+ *
+ * The navigation row Figma draws above the copy (the Weavely wordmark, five
+ * links, "Sign in" and "Talk to sales") is left out: a hero is not a navbar.
+ * The 152px Figma leaves above the pill is mostly that row; without it the
+ * copy starts 96px down on Desktop, 64 on Tablet and 32 on Mobile.
+ *
+ * Wider than Figma's 1440, the band keeps its drawing at 1440 and its two
+ * sleeves run on, flat, to the block's edges, so they never stop mid-page.
+ *
+ * In Arabic the drawing mirrors: the sleeves, the cuffs and the captions
+ * swap sides, and the captions tilt the other way. The photo moves with the
+ * drawing but is never flipped. The arrows point left; numbers stay left to
+ * right.
+ *
+ * Sized by the block's own width, not the window's: the section is a query
+ * container. Mobile is the base; `[@container(min-width:48rem)]:` is Figma's
+ * Tablet (768) and `[@container(min-width:90rem)]:` its Desktop, from 1440px:
+ * the width Figma draws it at, and the switch every Hero block shares, so
+ * Tablet's layout covers 768 to 1439.
+ */
+
+export interface HeroWaveBandAction {
+  label: React.ReactNode
+  href: string
+}
+
+export interface HeroWaveBandPhoto {
+  src: string
+  /** Describes the photo. Pass "" for a purely decorative one. */
+  alt: string
+}
+
+export interface HeroWaveBandCopy {
+  /** The pill's first part, in `success`. The pill is hidden when this is empty. */
+  announcement: React.ReactNode
+  /** The link at the pill's end, with an arrow. Hidden when null. */
+  announcementAction: HeroWaveBandAction | null
+  /** The headline, an `h1`. A line break in the string breaks the line. */
+  headline: React.ReactNode
+  /** The paragraph under the headline. */
+  description: React.ReactNode
+  /** The solid button. */
+  primaryAction: HeroWaveBandAction
+  /** The outline button beside it, with an arrow. Hidden when null. */
+  secondaryAction: HeroWaveBandAction | null
+  /**
+   * The captions on the sleeves, start side first. Figma shows two. Tablet
+   * and Desktop only.
+   */
+  captions: [React.ReactNode, React.ReactNode]
+  /** The line at the start of the trust strip. */
+  trustStatement: React.ReactNode
+  /** The customer names set as wordmarks at its end. Figma shows four. */
+  wordmarks: React.ReactNode[]
+}
+
+/** Figma's copy, English and Arabic. */
+const COPY: Record<"en" | "ar", HeroWaveBandCopy> = {
+  en: {
+    announcement: "WE’RE OPEN SOURCE",
+    announcementAction: { label: "See the source", href: "#source" },
+    headline: "Project management,\nmade for working together.",
+    description:
+      "From the first idea to the finish line. Bring issues, sprints, and roadmaps into one calm workspace your whole team can call home.",
+    primaryAction: {
+      label: (
+        <>
+          Get started in <bdi dir="ltr">30</bdi> seconds
+        </>
+      ),
+      href: "#get-started",
+    },
+    secondaryAction: { label: "Book a demo", href: "#demo" },
+    captions: ["No credit card. No chaos.", "Great things take a team."],
+    trustStatement: (
+      <>
+        A shared workspace for <bdi dir="ltr">1,000+</bdi> ambitious teams.
+      </>
+    ),
+    wordmarks: ["Corvane", "Tessaro", "Oblique", "Marloe"],
+  },
+  ar: {
+    announcement: "مفتوح المصدر",
+    announcementAction: { label: "اطّلع على الشيفرة", href: "#source" },
+    headline: "إدارة المشاريع\nصُممت للعمل معًا.",
+    description:
+      "من الفكرة الأولى حتى خط النهاية. اجمع المهام والدورات وخطط الطريق في مساحة عمل هادئة يعتبرها فريقك كله بيته.",
+    primaryAction: {
+      label: (
+        <>
+          ابدأ في <bdi dir="ltr">30</bdi> ثانية
+        </>
+      ),
+      href: "#get-started",
+    },
+    secondaryAction: { label: "احجز عرضًا", href: "#demo" },
+    captions: ["بلا بطاقة ائتمان، وبلا فوضى.", "الأشياء العظيمة تحتاج إلى فريق."],
+    trustStatement: (
+      <>
+        مساحة عمل مشتركة لأكثر من <bdi dir="ltr">1,000</bdi> فريق طموح.
+      </>
+    ),
+    wordmarks: ["كروان", "رواق", "مرآة", "أفق"],
+  },
+}
+
+/*
+ * Figma's sleeves and cuffs, in the band's own 1440 × 480 frame (Desktop's
+ * size; Tablet and Mobile scale it). Each sleeve ends in a straight cut at
+ * the block's edge; `RUN_ON` carries that cut on, flat, past 1440.
+ */
+const START_SLEEVE =
+  "M 0 1.0926 C 150 -8.9389 330 51.2502 570 134.5117 L 515 290 C 322 217.7732 132 219.7795 0 249.874 L 0 1.0926 Z"
+const END_SLEEVE =
+  "M 0 180.7385 C 207 152.3077 366 37.5692 570 0 L 570 264 C 365 349.2923 185 314.7692 40 330 L 0 180.7385 Z"
+const START_CUFF = "M 3.9335 0 L 50.1085 0.3422 L 50.1085 151.3421 L 0.0001 151.7607 L 3.9335 0 Z"
+const END_CUFF = "M 0 0 L 52.0847 0.1416 L 52.4019 145.5595 L 0 144.982 L 0 0 Z"
+const RUN_ON = 4000
+
+export interface HeroWaveBandProps
+  extends Omit<React.HTMLAttributes<HTMLElement>, "title">,
+    Partial<HeroWaveBandCopy> {
+  /** Which language the default copy is in. The page's `dir` sets the direction. */
+  locale?: "en" | "ar"
+  /**
+   * The handshake where the sleeves meet: a cut-out on a transparent
+   * background, so the band shows around it. None by default: a `muted`
+   * box of the same size holds its place.
+   * @default none: a `muted` placeholder
+   */
+  photo?: HeroWaveBandPhoto
+}
+
+export function HeroWaveBand({
+  locale = "en",
+  announcement,
+  announcementAction,
+  headline,
+  description,
+  primaryAction,
+  secondaryAction,
+  captions,
+  trustStatement,
+  wordmarks,
+  photo,
+  className,
+  ...props
+}: HeroWaveBandProps) {
+  const copy = COPY[locale]
+  const headingId = React.useId()
+  const pill = announcement ?? copy.announcement
+  const pillAction = announcementAction === undefined ? copy.announcementAction : announcementAction
+  const primary = primaryAction ?? copy.primaryAction
+  const secondary = secondaryAction === undefined ? copy.secondaryAction : secondaryAction
+  const [startCaption, endCaption] = captions ?? copy.captions
+  const names = wordmarks ?? copy.wordmarks
+
+  return (
+    <section
+      aria-labelledby={headingId}
+      className={cn("[container-type:inline-size] overflow-hidden bg-background", className)}
+      {...props}
+    >
+      {/*
+         * The section's colour fills the whole width; its content does not.
+         * From Tablet up to Desktop the content keeps Figma's Tablet width,
+         * 720px inside 24px padding, and centres, so a wide container shows
+         * Figma's Tablet layout rather than a stretched one.
+         */}
+      <div className="mx-auto flex w-full max-w-[1440px] [@container(min-width:48rem)]:max-w-[48rem] [@container(min-width:90rem)]:max-w-[1440px] flex-col gap-10 px-4 py-8 [@container(min-width:48rem)]:gap-12 [@container(min-width:48rem)]:px-6 [@container(min-width:48rem)]:py-16 [@container(min-width:90rem)]:gap-0 [@container(min-width:90rem)]:px-16 [@container(min-width:90rem)]:pb-[30px] [@container(min-width:90rem)]:pt-24">
+        <div className="flex w-full flex-col items-center gap-[22px] text-center [@container(min-width:90rem)]:mx-auto [@container(min-width:90rem)]:max-w-[1040px]">
+          {pill ? (
+            <p className="inline-flex items-center gap-4 rounded-full px-[15px] py-2 text-xxs font-medium ring-1 ring-inset ring-success">
+              <span className="whitespace-nowrap text-foreground">{pill}</span>
+              {pillAction ? (
+                <a
+                  href={pillAction.href}
+                  className="relative inline-flex items-center gap-0.5 whitespace-nowrap rounded-sm text-foreground before:absolute before:-inset-x-1 before:-inset-y-3 [outline:none] hover:underline hover:underline-offset-2 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
+                >
+                  {pillAction.label}
+                  <ArrowUpRight size={10} strokeWidth={1.5} absoluteStrokeWidth aria-hidden className="[&:dir(rtl)]:-scale-x-100" />
+                </a>
+              ) : null}
+            </p>
+          ) : null}
+          <h1
+            id={headingId}
+            className="whitespace-pre-line text-balance text-3xl font-medium text-foreground [@container(min-width:48rem)]:text-4xl [@container(min-width:90rem)]:text-5xl"
+          >
+            {headline ?? copy.headline}
+          </h1>
+          <p className="text-balance text-base text-muted-foreground [@container(min-width:48rem)]:text-lg [@container(min-width:90rem)]:max-w-[650px]">
+            {description ?? copy.description}
+          </p>
+          {/* Figma pads the buttons 3px further down than the rest of the column. */}
+          <div className="flex w-full flex-col gap-3 pt-[3px] [@container(min-width:48rem)]:w-auto [@container(min-width:48rem)]:flex-row">
+            <a href={primary.href} className={buttonVariants({ size: "lg", radius: "rounded" })}>
+              {primary.label}
+            </a>
+            {secondary ? (
+              <a href={secondary.href} className={buttonVariants({ variant: "outline", tone: "primary", size: "lg", radius: "rounded" })}>
+                {secondary.label}
+                <ArrowRight aria-hidden strokeWidth={1.5} absoluteStrokeWidth className="[&:dir(rtl)]:-scale-x-100" />
+              </a>
+            ) : null}
+          </div>
+        </div>
+
+        {/*
+         * The band. Its drawing is one 1440 × 480 frame (3:1) that scales
+         * with its width: the content's full width on Tablet, 171% of it on
+         * Mobile, centred and cut at the content's edges as Figma cuts it,
+         * and a fixed 1440px on Desktop. There the band starts 24px above
+         * the buttons' foot and takes only 377px of the column, so the trust
+         * strip lies over its lower part; the section crops what runs past
+         * its bottom edge, as Figma does.
+         */}
+        <div className="pointer-events-none relative flex items-start justify-center overflow-hidden [@container(min-width:90rem)]:-mt-6 [@container(min-width:90rem)]:h-[377px] [@container(min-width:90rem)]:overflow-visible">
+          <div className="relative aspect-[3/1] w-[171.43%] shrink-0 [@container(min-width:48rem)]:w-full [@container(min-width:90rem)]:w-[1440px]">
+            <div className="absolute start-[29.375%] top-[22.708%] h-[75.833%] w-[40.417%] overflow-hidden bg-muted">
+              {photo ? (
+                <img src={photo.src} alt={photo.alt} decoding="async" className="absolute inset-0 size-full object-cover" />
+              ) : null}
+            </div>
+
+            <svg
+              aria-hidden
+              viewBox="0 0 1440 480"
+              className="absolute inset-0 size-full overflow-visible [&:dir(rtl)]:-scale-x-100"
+            >
+              <g className="fill-success">
+                <g transform="translate(-20 42)">
+                  <path d={START_SLEEVE} />
+                  <rect x={-RUN_ON} y={1.0926} width={RUN_ON + 1} height={248.7814} />
+                </g>
+                <g transform="translate(900 0)">
+                  <path d={END_SLEEVE} />
+                  <rect x={569} y={0} width={RUN_ON} height={264} />
+                </g>
+              </g>
+              <g className="fill-foreground">
+                <path d={START_CUFF} transform="translate(543.896 181.668) rotate(18)" />
+                <path d={END_CUFF} transform="translate(851.167 199.146) rotate(-14.8)" />
+              </g>
+              <g className="fill-background">
+                <circle cx={530} cy={306} r={6} />
+                <circle cx={524} cy={322} r={6} />
+                <circle cx={878.485} cy={205.344} r={6} />
+                <circle cx={883.485} cy={220.344} r={6} />
+              </g>
+            </svg>
+
+            {/*
+             * Tilted with their sleeves, from the start corner of each line.
+             * In Arabic they swap sides and tilt the other way.
+             */}
+            <p className="absolute start-[6.667%] top-[38.542%] hidden origin-top-left -rotate-[9deg] whitespace-nowrap text-xs text-foreground dark:text-success-foreground [&:dir(rtl)]:origin-top-right [&:dir(rtl)]:rotate-[9deg] [@container(min-width:48rem)]:block [@container(min-width:90rem)]:text-2xl">
+              {startCaption}
+            </p>
+            <p className="absolute start-[75.694%] top-[33.542%] hidden origin-top-left rotate-[10deg] whitespace-nowrap text-xs text-foreground dark:text-success-foreground [&:dir(rtl)]:origin-top-right [&:dir(rtl)]:-rotate-[10deg] [@container(min-width:48rem)]:block [@container(min-width:90rem)]:text-2xl">
+              {endCaption}
+            </p>
+          </div>
+        </div>
+
+        <div className="relative flex flex-col border-t border-border pt-5 [@container(min-width:48rem)]:flex-row [@container(min-width:48rem)]:items-center [@container(min-width:48rem)]:justify-between [@container(min-width:48rem)]:gap-6">
+          <p className="text-pretty text-xs text-muted-foreground">{trustStatement ?? copy.trustStatement}</p>
+          <ul className="flex flex-wrap items-center gap-x-[46px] gap-y-3 [@container(min-width:48rem)]:shrink-0 [@container(min-width:48rem)]:flex-nowrap">
+            {names.map((name, index) => (
+              <li key={index} className="whitespace-nowrap text-lg font-semibold text-muted-foreground [@container(min-width:48rem)]:text-xl">
+                {name}
+              </li>
+            ))}
+          </ul>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+/**
+ * The default copy, English and Arabic, as `locale` picks it. Spread it to
+ * change a few strings and keep the rest.
+ */
+export const heroWaveBandCopy = COPY

package/registry/blocks/hero-wave-band/index.ts

@@ -0,0 +1,8 @@
+export {
+  HeroWaveBand,
+  heroWaveBandCopy,
+  type HeroWaveBandAction,
+  type HeroWaveBandCopy,
+  type HeroWaveBandPhoto,
+  type HeroWaveBandProps,
+} from "./HeroWaveBand"

package/registry/blocks/how-it-works/how-it-works.tsx

@@ -0,0 +1,330 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../../src/lib/utils"
+
+/*
+ * Figma: `How it Works` (42334:294272). The parts every `how-it-works-*` block
+ * is built from, one per thing the Figma set repeats: the section and its
+ * 1248px column, the eyebrow line, the plain hairline, a run of figures that
+ * keeps its order in Arabic, and the helpers that play a block's motion once.
+ *
+ * Mobile first, and sized by the block's own width, not the window's, as the
+ * Careers and Pricing blocks are: the section is a query container, so a block
+ * lays out for the room it is given, such as a docs preview narrower than the
+ * screen. The base classes are Figma's Mobile (360, 296px of content);
+ * `[@container(min-width:40rem)]:` is its Tablet, from 640px of content
+ * (Figma's Tablet, 768 less its padding), and `[@container(min-width:64rem)]:`
+ * its Desktop, from 1024px of content. The section's own padding still follows
+ * the window, since an element can't query itself. The page's `dir` sets the
+ * direction; nothing here takes one.
+ *
+ * Where the code differs from Figma, for every Type in the set:
+ *
+ * - Separator: the code library has no Separator component yet, so the 1px
+ *   hairline is `HowItWorksRule`, a line in the `border` token. Replace it with
+ *   Separator once that is built.
+ * - Motion plays once, when the block enters the view. Nothing is tied to the
+ *   scroll position, pinned, cycled on a timer, autoplayed or looped for good:
+ *   a loop in Figma runs a few times and rests, and under
+ *   `prefers-reduced-motion` a block renders its finished state. See each
+ *   Type's own comment for what it dropped from its Figma motion card.
+ * - A scrim over a photo stays dark, and the text on it light, in Light and in
+ *   Dark, as Gallery does it, so white text stays readable on the photo.
+ *   Figma's `custom/black` and `custom/white` flip in Dark; here they are
+ *   `background-inverse` and `foreground-inverse`, pinned as Gallery pins them.
+ */
+
+export type HowItWorksLocale = "en" | "ar"
+
+export interface HowItWorksSectionProps extends React.HTMLAttributes<HTMLElement> {
+  /** The id of the heading that names the section. */
+  labelledBy?: string
+  /** Classes for the 1248px column inside the padding. */
+  contentClassName?: string
+}
+
+/**
+ * Figma's section: `theme/background`, padding 96 on Desktop, 64 on Tablet and
+ * 32 on phones, a 1248px column and 48px between its parts.
+ */
+export const HowItWorksSection = React.forwardRef<HTMLElement, HowItWorksSectionProps>(function HowItWorksSection(
+  { labelledBy, className, contentClassName, children, ...props },
+  ref
+) {
+  return (
+    <section ref={ref} aria-labelledby={labelledBy} className={cn("[container-type:inline-size] bg-background p-8 md:p-16 lg:p-24", className)} {...props}>
+      <div className={cn("mx-auto flex w-full max-w-[1248px] flex-col gap-12", contentClassName)}>{children}</div>
+    </section>
+  )
+})
+
+/** A photo a block shows: its file and what it shows. Pass `alt=""` for a purely decorative one. */
+export interface HowItWorksPhoto {
+  src: string
+  alt: string
+}
+
+/**
+ * A photo filling its box, cropped to fit. The box (`relative`, a `muted`
+ * fill and `overflow-hidden`) is the caller's; without a photo it stays a
+ * quiet `muted` placeholder.
+ */
+export function HowItWorksImage({ photo, className }: { photo?: HowItWorksPhoto; className?: string }) {
+  if (!photo) return null
+  return <img src={photo.src} alt={photo.alt} loading="lazy" decoding="async" draggable={false} className={cn("absolute inset-0 size-full object-cover", className)} />
+}
+
+/**
+ * The dark scrim under white text on a photo: Figma's stack of flat black
+ * layers, one over the whole photo and three stronger over its lower part, so
+ * the foot is about 70% black and the top about 28%. Each layer is `base-black`
+ * at a fixed strength, the same in Light and in Dark. Inside a `group`, hovering
+ * deepens the whole stack. Place it between the photo and the text.
+ */
+export function HowItWorksScrim({ className }: { className?: string }) {
+  return (
+    <span aria-hidden="true" className={cn("pointer-events-none absolute inset-0", className)}>
+      <span className="absolute inset-0 bg-base-black/[0.28] transition-colors duration-[250ms] group-hover:bg-base-black/[0.42] motion-reduce:transition-none" />
+      <span className="absolute inset-x-0 bottom-0 h-3/5 bg-base-black/20" />
+      <span className="absolute inset-x-0 bottom-0 h-2/5 bg-base-black/25" />
+      <span className="absolute inset-x-0 bottom-0 h-1/4 bg-base-black/30" />
+    </span>
+  )
+}
+
+export interface HowItWorksHeaderProps extends Omit<React.HTMLAttributes<HTMLElement>, "title"> {
+  /** The id the section's `aria-labelledby` points at. */
+  headingId: string
+  /** The small line above the heading. Hidden when empty. */
+  eyebrow?: React.ReactNode
+  /** The section's heading, an `h2`. */
+  heading: React.ReactNode
+  /** The line under the heading. Hidden when empty. */
+  description?: React.ReactNode
+  /** Classes for the eyebrow, the heading and the line: how a Type recolours them on its own surface. */
+  eyebrowClassName?: string
+  headingClassName?: string
+  descriptionClassName?: string
+}
+
+/**
+ * The left-aligned header most Types open with: an eyebrow, a heading (3XL on
+ * phones, 4XL on Tablet, 5XL on Desktop) and a line, 12px apart.
+ */
+export function HowItWorksHeader({ headingId, eyebrow, heading, description, eyebrowClassName, headingClassName, descriptionClassName, className, children, ...props }: HowItWorksHeaderProps) {
+  return (
+    <header className={cn("flex w-full flex-col items-start gap-3", className)} {...props}>
+      {eyebrow ? <HowItWorksEyebrow className={eyebrowClassName}>{eyebrow}</HowItWorksEyebrow> : null}
+      <h2 id={headingId} className={cn("text-3xl font-semibold text-foreground [@container(min-width:40rem)]:text-4xl [@container(min-width:64rem)]:text-5xl", headingClassName)}>
+        {heading}
+      </h2>
+      {description ? <p className={cn("max-w-[720px] text-base text-muted-foreground", descriptionClassName)}>{description}</p> : null}
+      {children}
+    </header>
+  )
+}
+
+/**
+ * The small line above a heading: `XS/Medium` in `primary`, set in capitals
+ * with 8% tracking. Arabic has no capitals and joins its letters, so in RTL
+ * the tracking is dropped.
+ */
+export function HowItWorksEyebrow({ children, className }: { children: React.ReactNode; className?: string }) {
+  return <p className={cn("text-xs font-medium uppercase tracking-[0.08em] text-primary [&:dir(rtl)]:tracking-normal", className)}>{children}</p>
+}
+
+/**
+ * Figma's `Separator`: a 1px `border` line across its container. The code
+ * library has no Separator component yet; swap this for it once it does.
+ */
+export function HowItWorksRule({ className }: { className?: string }) {
+  return <div role="presentation" className={cn("w-full border-t border-border", className)} />
+}
+
+/** The theme colours a glow can take. Each is a token, never a raw colour. */
+export type HowItWorksGlowTone = "chart-1" | "chart-2" | "chart-3" | "chart-4" | "chart-5" | "info" | "success" | "warning" | "destructive"
+
+const GLOW_TONES: Record<HowItWorksGlowTone, string> = {
+  "chart-1": "bg-chart-1",
+  "chart-2": "bg-chart-2",
+  "chart-3": "bg-chart-3",
+  "chart-4": "bg-chart-4",
+  "chart-5": "bg-chart-5",
+  info: "bg-info",
+  success: "bg-success",
+  warning: "bg-warning",
+  destructive: "bg-destructive",
+}
+
+export interface HowItWorksGlowProps extends React.HTMLAttributes<HTMLSpanElement> {
+  tone: HowItWorksGlowTone
+  /** How solid the shape is, 0 to 1. Figma sets 0.4 to 0.55. */
+  strength?: number
+  /** The blur radius in px. 32 by default; Stacked Media + Text sets 28, which matches Figma's render of its pictures. */
+  blur?: number
+}
+
+/**
+ * A soft blurred shape of colour for a background: an ellipse in a theme
+ * token, blurred and thinned to `strength`. Figma's 64px layer blur is a
+ * Gaussian radius, which CSS spells as half that: `blur(32px)`. Place it with `style` or
+ * classes inside a box that clips (`overflow-hidden`). It carries no meaning,
+ * so it is hidden from screen readers.
+ */
+export function HowItWorksGlow({ tone, strength = 0.5, blur, className, style, ...props }: HowItWorksGlowProps) {
+  return (
+    <span
+      aria-hidden="true"
+      className={cn("pointer-events-none absolute rounded-[50%]", blur === undefined && "blur-[32px]", GLOW_TONES[tone], className)}
+      style={{ opacity: strength, ...(blur === undefined ? null : { filter: `blur(${blur}px)` }), ...style }}
+      {...props}
+    />
+  )
+}
+
+/**
+ * A run that keeps its left-to-right order inside Arabic text: a time such as
+ * `09:00`, a figure, a code. Western digits stay Western in Figma's Arabic.
+ */
+export function HowItWorksLtr({ children, className }: { children: React.ReactNode; className?: string }) {
+  return (
+    <bdi dir="ltr" className={cn("whitespace-nowrap", className)}>
+      {children}
+    </bdi>
+  )
+}
+
+/**
+ * A line with figures in it, such as "12 دقيقة" or "Locks again in 30
+ * seconds": each run of digits is set in its own left-to-right isolate, so a
+ * figure keeps its order and the words around it keep theirs. Anything but a
+ * string passes through untouched.
+ */
+export function HowItWorksFigures({ children }: { children: React.ReactNode }) {
+  if (typeof children !== "string") return <>{children}</>
+  const parts = children.split(/(\d[\d.,:%]*)/)
+  if (parts.length === 1) return <>{children}</>
+  return (
+    <>
+      {parts.map((part, index) =>
+        index % 2 === 1 ? (
+          <HowItWorksLtr key={index}>{part}</HowItWorksLtr>
+        ) : (
+          <React.Fragment key={index}>{part}</React.Fragment>
+        )
+      )}
+    </>
+  )
+}
+
+/** The stroke Figma gives every Lucide icon in the set: 1.5px at any size. Spread it onto an icon. */
+export const HOW_IT_WORKS_ICON = { strokeWidth: 1.5, absoluteStrokeWidth: true } as const
+
+/** Figma's ease-out: fast at the start, a soft settle. */
+export const EASE_OUT = "cubic-bezier(0, 0, 0.2, 1)"
+
+/** Whether the visitor asked for less motion. False where there are no media queries. */
+export function prefersReducedMotion() {
+  return typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches
+}
+
+/** Anything a block's entrance starts that can be stopped: a Web Animation, or a count that steps by hand. */
+export type Cancellable = { cancel(): void }
+
+/**
+ * Counts a figure up from 0 to `value` over `duration` ms, writing into the
+ * text node it already has, and leaves the final value in place. Returns a
+ * handle that stops it and restores the value.
+ */
+export function countUp(element: HTMLElement, value: number, duration = 500, delay = 0): Cancellable {
+  const text = element.firstChild
+  const final = String(value)
+  let frame = 0
+  let timer = 0
+  const finish = () => {
+    if (text) text.nodeValue = final
+  }
+  const start = () => {
+    const began = performance.now()
+    const step = (now: number) => {
+      const t = Math.min(1, (now - began) / duration)
+      if (text) text.nodeValue = String(Math.round(value * t))
+      if (t < 1) frame = requestAnimationFrame(step)
+    }
+    frame = requestAnimationFrame(step)
+  }
+  if (text) text.nodeValue = "0"
+  timer = window.setTimeout(start, delay)
+  return {
+    cancel() {
+      window.clearTimeout(timer)
+      cancelAnimationFrame(frame)
+      finish()
+    },
+  }
+}
+
+/**
+ * Plays a block's entrance once, when it first comes into view. `play` gets
+ * the block's root and returns what it started; those are cancelled when the
+ * block unmounts. Nothing plays under reduced motion, which leaves
+ * the block in its finished state, nor where the browser has no Web
+ * Animations or no IntersectionObserver.
+ */
+export function useRevealOnEnter(root: React.RefObject<HTMLElement | null>, play: (node: HTMLElement) => Cancellable[], threshold = 0.2) {
+  const playRef = React.useRef(play)
+  playRef.current = play
+  React.useLayoutEffect(() => {
+    const node = root.current
+    if (!node || typeof node.animate !== "function" || typeof IntersectionObserver === "undefined") return
+    if (prefersReducedMotion()) return
+    let animations: Cancellable[] = []
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (!entries.some((entry) => entry.isIntersecting)) return
+        observer.disconnect()
+        animations = playRef.current(node)
+      },
+      { threshold }
+    )
+    observer.observe(node)
+    return () => {
+      observer.disconnect()
+      animations.forEach((animation) => animation.cancel())
+    }
+  }, [root, threshold])
+}
+
+/** Every element a block marked `data-reveal="name"`, in document order. */
+export function revealTargets(node: HTMLElement, name: string) {
+  return Array.from(node.querySelectorAll<HTMLElement>(`[data-reveal="${name}"]`))
+}
+
+/**
+ * Starts one entrance: the element rests in its natural state, so the
+ * keyframes name where it comes from. `fill: "backwards"` holds the first
+ * frame through the delay.
+ */
+export function enter(element: Element, keyframes: Keyframe[], options: KeyframeAnimationOptions = {}): Animation {
+  return element.animate(keyframes, { duration: 400, easing: EASE_OUT, fill: "backwards", ...options })
+}
+
+/** Rises 8px while fading in: the entrance most blocks give their cards and lines. */
+export const RISE: Keyframe[] = [
+  { opacity: 0, transform: "translateY(8px)" },
+  { opacity: 1, transform: "none" },
+]
+
+/** Pops from nothing past full size and back, as Figma's markers and tiles do. */
+export const POP: Keyframe[] = [
+  { opacity: 0, transform: "scale(0)" },
+  { opacity: 1, transform: "scale(1.15)", offset: 0.7 },
+  { opacity: 1, transform: "scale(1)" },
+]
+
+/** Draws a line from its start: the track, a rule, a bar growing along its inline axis. */
+export const GROW_X: Keyframe[] = [{ transform: "scaleX(0)" }, { transform: "scaleX(1)" }]
+
+/** Draws a line down from its top. */
+export const GROW_Y: Keyframe[] = [{ transform: "scaleY(0)" }, { transform: "scaleY(1)" }]

package/registry/blocks/how-it-works/index.ts

@@ -0,0 +1,28 @@
+export {
+  countUp,
+  EASE_OUT,
+  enter,
+  GROW_X,
+  GROW_Y,
+  HowItWorksEyebrow,
+  HowItWorksFigures,
+  HowItWorksGlow,
+  HowItWorksHeader,
+  HowItWorksImage,
+  HowItWorksLtr,
+  HowItWorksRule,
+  HowItWorksScrim,
+  HowItWorksSection,
+  POP,
+  prefersReducedMotion,
+  revealTargets,
+  RISE,
+  useRevealOnEnter,
+  type Cancellable,
+  type HowItWorksGlowProps,
+  type HowItWorksHeaderProps,
+  type HowItWorksPhoto,
+  type HowItWorksGlowTone,
+  type HowItWorksLocale,
+  type HowItWorksSectionProps,
+} from "./how-it-works"