{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "marketing-feature-bento", "title": "Marketing feature bento", "description": "Marketing feature bento is a production-ready blocks component from BJORK UI, packaged for shadcn registries.", "dependencies": [ "clsx", "framer-motion", "lucide-react", "tailwind-merge" ], "files": [ { "path": "components/bjork-ui/blocks/marketing-feature-bento.tsx", "content": "\"use client\";\n\nimport { Fragment, useId, type ReactNode } from \"react\";\nimport { motion } from \"framer-motion\";\nimport {\n blockFrame,\n blockToneProps,\n CtaLink,\n Reveal,\n SectionHeader,\n useBlockReducedMotion,\n type BlockLink,\n type BlockTone,\n} from \"@/components/bjork-ui/blocks/marketing-kit\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface BentoSpan {\n label: string;\n /** Start offset, in the same unit as `total`. */\n start: number;\n duration: number;\n /** Marks the span as the slow one: accent bar and a duration tag. */\n slow?: boolean;\n}\n\nexport type BentoVisual =\n | { type: \"waterfall\"; spans: BentoSpan[]; total: number; unit?: string }\n | { type: \"replay\"; markers: number[]; position: number; timecode: string; label: string }\n | { type: \"alerts\"; alerts: { title: string; meta: string }[] }\n | { type: \"cost\"; value: string; caption: string; bars: number[]; highlight?: number }\n | { type: \"code\"; filename: string; lines: string[] }\n | { type: \"keys\"; shortcuts: { keys: string[]; label: string }[] }\n | { type: \"redact\"; segments: (string | { redacted: string })[]; badge: string }\n | { type: \"custom\"; node: ReactNode };\n\nexport interface BentoFeature {\n id: string;\n title: string;\n description: string;\n visual: BentoVisual;\n /** Width on the six-column grid: sm is a third, md a half, lg two thirds, full the whole row. */\n size?: \"sm\" | \"md\" | \"lg\" | \"full\";\n /** Turns the whole card into a link. */\n href?: string;\n}\n\nexport interface MarketingFeatureBentoProps {\n eyebrow?: string;\n title: ReactNode;\n description?: ReactNode;\n cta?: BlockLink;\n features: BentoFeature[];\n tone?: BlockTone;\n /** Play the in-view motion. Turn off for screenshots. */\n animate?: boolean;\n className?: string;\n}\n\nexport const MARKETING_BENTO_SAMPLE: MarketingFeatureBentoProps = {\n eyebrow: \"Platform\",\n title: \"Everything between the prompt and the answer.\",\n description:\n \"One trace per run, from the first token to the last tool call. Find the slow step, replay it, and fix it before the next deploy.\",\n cta: { label: \"Explore the platform\", href: \"#platform\" },\n features: [\n {\n id: \"traces\",\n size: \"lg\",\n title: \"Live traces, span by span\",\n description: \"Every model call, tool and retry lands on one timeline while the run is still going.\",\n visual: {\n type: \"waterfall\",\n total: 10,\n unit: \"s\",\n spans: [\n { label: \"read_request\", start: 0, duration: 0.7 },\n { label: \"lookup_order\", start: 0.7, duration: 1.2 },\n { label: \"search_policy\", start: 1.9, duration: 1.6 },\n { label: \"issue_refund\", start: 3.5, duration: 4.6, slow: true },\n { label: \"draft_reply\", start: 8.1, duration: 1.2 },\n { label: \"send_reply\", start: 9.3, duration: 0.6 },\n ],\n },\n },\n {\n id: \"replay\",\n size: \"sm\",\n title: \"Replay from any step\",\n description: \"Rewind a failed run to the step before it broke and run it again with a new prompt.\",\n visual: { type: \"replay\", markers: [0, 0.08, 0.2, 0.36, 0.82, 0.94], position: 0.36, timecode: \"00:03.5\", label: \"issue_refund\" },\n },\n {\n id: \"alerts\",\n size: \"sm\",\n title: \"Alerts that read like sentences\",\n description: \"Thresholds on any span, routed to the people who own it.\",\n visual: {\n type: \"alerts\",\n alerts: [\n { title: \"issue_refund p95 crossed 4s\", meta: \"support-agent · 2m ago\" },\n { title: \"Retry rate up 3x on lookup_order\", meta: \"support-agent · 18m ago\" },\n { title: \"Token spend 40% over budget\", meta: \"research-agent · 1h ago\" },\n ],\n },\n },\n {\n id: \"cost\",\n size: \"sm\",\n title: \"Cost per run, not per month\",\n description: \"Tokens and tool fees priced on every trace, so a costly prompt shows up the day it ships.\",\n visual: {\n type: \"cost\",\n value: \"$0.031\",\n caption: \"median cost per run\",\n bars: [3, 5, 8, 12, 15, 13, 9, 6, 4, 3, 2, 5],\n highlight: 11,\n },\n },\n {\n id: \"install\",\n size: \"sm\",\n title: \"Two lines to install\",\n description: \"Wraps the SDK you already use. OpenTelemetry in, OpenTelemetry out.\",\n visual: {\n type: \"code\",\n filename: \"agent.ts\",\n // The quote is escaped so registry tooling does not read this sample line as a real import.\n lines: [\"import { trace } from \\u0022@tracewell/sdk\\u0022;\", \"\", 'trace.init({ project: \"support\" });'],\n },\n },\n {\n id: \"keys\",\n size: \"md\",\n title: \"Built for the keyboard\",\n description: \"Jump between runs and steps without reaching for the mouse.\",\n visual: {\n type: \"keys\",\n shortcuts: [\n { keys: [\"⌘\", \"K\"], label: \"Jump to a run\" },\n { keys: [\"J\"], label: \"Next step\" },\n { keys: [\"K\"], label: \"Previous step\" },\n { keys: [\"R\"], label: \"Replay from here\" },\n ],\n },\n },\n {\n id: \"private\",\n size: \"md\",\n title: \"Private by default\",\n description: \"Emails, card numbers and keys are masked in the SDK, before anything leaves your servers.\",\n visual: {\n type: \"redact\",\n badge: \"3 fields masked\",\n segments: [\n \"Customer \",\n { redacted: \"maya.okafor@\" },\n \" asked to refund the order paid with the card ending \",\n { redacted: \"4242\" },\n \", and to ship the replacement to \",\n { redacted: \"18 Alder Row\" },\n \".\",\n ],\n },\n },\n ],\n};\n\nconst SIZE_CLASS: Record, string> = {\n sm: \"@2xl:col-span-1 @5xl:col-span-2\",\n md: \"@2xl:col-span-1 @5xl:col-span-3\",\n lg: \"@2xl:col-span-2 @5xl:col-span-4\",\n full: \"@2xl:col-span-2 @5xl:col-span-6\",\n};\n\n/**\n * A feature section on a bento grid. Each card carries a small working illustration (trace waterfall,\n * replay scrubber, alert stack, cost histogram, install snippet, shortcuts, redaction) built from the\n * content you pass, so the grid explains the product instead of decorating it.\n */\nexport function MarketingFeatureBento({\n eyebrow,\n title,\n description,\n cta,\n features,\n tone = \"auto\",\n animate = true,\n className,\n}: MarketingFeatureBentoProps) {\n const titleId = useId();\n const toneProps = blockToneProps(tone);\n\n return (\n \n
\n
\n \n
\n {description ? (\n

\n {description}\n

\n ) : null}\n {cta ? : null}\n
\n
\n\n
    \n {features.map((feature, index) => (\n \n ))}\n
\n
\n \n );\n}\n\nfunction FeatureCard({ feature, index, animate }: { feature: BentoFeature; index: number; animate: boolean }) {\n const titleId = useId();\n const body = (\n <>\n
\n \n
\n
\n

\n {feature.title}\n

\n

\n {feature.description}\n

\n
\n \n );\n\n const shell =\n \"group/card relative flex h-full flex-col overflow-hidden rounded-[22px] border border-[color:var(--bjork-border)] bg-[var(--bjork-surface)] shadow-[var(--bjork-shadow-panel)] transition-colors duration-200\";\n\n const content = feature.href ? (\n \n {body}\n \n ) : (\n
\n {body}\n
\n );\n\n const size = SIZE_CLASS[feature.size ?? \"sm\"];\n if (!animate) return
  • {content}
    • ;\n return (\n \n {content}\n \n );\n}\n\nfunction Visual({ visual, animate }: { visual: BentoVisual; animate: boolean }) {\n switch (visual.type) {\n case \"waterfall\":\n return ;\n case \"replay\":\n return ;\n case \"alerts\":\n return ;\n case \"cost\":\n return ;\n case \"code\":\n return ;\n case \"keys\":\n return ;\n case \"redact\":\n return ;\n case \"custom\":\n return <>{visual.node};\n }\n}\n\n/* Visuals. All decorative (the card hides them from assistive tech); the card text carries the meaning. */\n\nfunction useGrow(animate: boolean) {\n const reduce = useBlockReducedMotion();\n return (delay: number) =>\n animate && !reduce\n ? {\n initial: { scaleX: 0 },\n whileInView: { scaleX: 1 },\n viewport: { once: true, amount: 0.6 },\n transition: { type: \"spring\" as const, stiffness: 180, damping: 26, mass: 0.9, delay },\n }\n : {};\n}\n\nfunction Waterfall({ spans, total, unit = \"s\", animate }: { spans: BentoSpan[]; total: number; unit?: string; animate: boolean }) {\n const grow = useGrow(animate);\n const ticks = [0, 0.25, 0.5, 0.75, 1];\n return (\n
    \n
    \n \n
    \n {ticks.map((tick) => (\n \n {(tick * total).toFixed(tick * total % 1 ? 1 : 0)}\n {unit}\n \n ))}\n
    \n {spans.map((span, index) => (\n \n \n {span.label}\n     \n
    \n \n
    \n \n {span.slow ? (\n \n {span.duration}\n {unit}\n \n ) : null}\n
    \n
    \n \n ))}\n
    \n
    \n );\n}\n\nfunction Replay({ markers, position, timecode, label }: { markers: number[]; position: number; timecode: string; label: string }) {\n return (\n
    \n
    \n \n \n \n \n \n \n Replay\n \n {timecode}\n
    \n
    \n
    \n \n {markers.map((marker) => (\n \n ))}\n \n \n \n {label}\n \n
    \n
    \n
    \n );\n}\n\nfunction Alerts({ alerts }: { alerts: { title: string; meta: string }[] }) {\n const stack = alerts.slice(0, 3);\n return (\n
    \n {stack.map((alert, index) => {\n const depth = index;\n return (\n \n 0 &&\n \"opacity-0 transition-opacity duration-300 group-hover/card:opacity-100 motion-reduce:transition-none\",\n )}\n >\n \n \n {alert.title}\n {alert.meta}\n \n
    \n \n );\n })}\n \n );\n}\n\nfunction Cost({ value, caption, bars, highlight, animate }: { value: string; caption: string; bars: number[]; highlight?: number; animate: boolean }) {\n const reduce = useBlockReducedMotion();\n const max = Math.max(...bars);\n return (\n
    \n
    \n

    \n {value}\n

    \n

    {caption}

    \n
    \n
    \n {bars.map((bar, index) => (\n \n ))}\n
    \n
    \n );\n}\n\nconst CODE_TOKEN = /(\"[^\"]*\"|\\b(?:import|from|const|await|export)\\b)/g;\n\nfunction Code({ filename, lines }: { filename: string; lines: string[] }) {\n return (\n
    \n
    \n {filename}\n \n \n \n \n
    \n 
    \n        {lines.map((line, index) => (\n          
    \n            {index + 1}\n            \n              {line.split(CODE_TOKEN).map((part, partIndex) =>\n                part.startsWith('\"') ? (\n                  \n                    {part}\n                  \n                ) : /^(import|from|const|await|export)$/.test(part) ? (\n                  \n                    {part}\n                  \n                ) : (\n                  {part}\n                ),\n              )}\n            \n          
    \n        ))}\n
    \n
    \n );\n}\n\nfunction Keys({ shortcuts }: { shortcuts: { keys: string[]; label: string }[] }) {\n return (\n
    \n {shortcuts.map((shortcut, index) => (\n \n {shortcut.label}\n \n {shortcut.keys.map((key) => (\n \n {key}\n \n ))}\n \n
    \n ))}\n \n );\n}\n\nfunction Redact({ segments, badge }: { segments: (string | { redacted: string })[]; badge: string }) {\n return (\n
    \n
    \n span input\n \n \n \n \n \n {badge}\n \n
    \n

    \n {segments.map((segment, index) =>\n typeof segment === \"string\" ? (\n {segment}\n ) : (\n \n {segment.redacted}\n \n \n ),\n )}\n

    \n
    \n );\n}\n", "type": "registry:component", "target": "@components/bjork-ui/blocks/marketing-feature-bento.tsx" }, { "path": "components/bjork-ui/blocks/marketing-kit.tsx", "content": "\"use client\";\n\nimport {\n useSyncExternalStore,\n type CSSProperties,\n type MouseEventHandler,\n type ReactNode,\n} from \"react\";\nimport { motion, useReducedMotion } from \"framer-motion\";\nimport { ArrowRight } from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * Shared pieces for the marketing blocks: tone scoping, hydration-safe reduced motion,\n * the section heading, call-to-action links and the in-view reveal.\n */\n\nexport type BlockTone = \"light\" | \"dark\" | \"auto\";\n\nconst subscribeNoop = () => () => {};\n\n/** `true` once hydrated and the visitor asked for reduced motion. The server and first client render agree on `false`. */\nexport function useBlockReducedMotion(): boolean {\n const hydrated = useSyncExternalStore(subscribeNoop, () => true, () => false);\n const prefers = useReducedMotion();\n return hydrated && prefers === true;\n}\n\n/**\n * Scopes the library tokens to one block. \"light\" and \"dark\" re-declare every `--bjork-*` token on the\n * section through the `.light` / `.dark` classes; \"auto\" inherits whatever the page sets.\n * Blocks only colour through these tokens, never through `dark:` variants, so a forced tone holds.\n */\nexport function blockToneProps(tone: BlockTone): { className?: string; style?: CSSProperties } {\n if (tone === \"auto\") return {};\n return { className: tone, style: { colorScheme: tone } };\n}\n\n/** Focus ring used by every interactive element in the blocks. */\nexport const focusRing =\n \"outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--bjork-accent)] focus-visible:ring-offset-2 focus-visible:ring-offset-[color:var(--bjork-ring-offset)]\";\n\n/** Section padding and width that every block shares, so stacked blocks line up. */\nexport const blockFrame = \"mx-auto w-full max-w-[1200px] px-5 @2xl:px-8 @5xl:px-10\";\n\nexport interface BlockLink {\n label: string;\n href: string;\n /** Optional click handler; the link still navigates unless you call `preventDefault`. */\n onClick?: MouseEventHandler;\n}\n\nexport function Eyebrow({ children, className }: { children: ReactNode; className?: string }) {\n return (\n \n \n {children}\n

    \n );\n}\n\nexport interface SectionHeaderProps {\n id: string;\n eyebrow?: ReactNode;\n title: ReactNode;\n description?: ReactNode;\n align?: \"start\" | \"center\";\n as?: \"h1\" | \"h2\" | \"h3\";\n className?: string;\n children?: ReactNode;\n}\n\nexport function SectionHeader({\n id,\n eyebrow,\n title,\n description,\n align = \"start\",\n as: Heading = \"h2\",\n className,\n children,\n}: SectionHeaderProps) {\n return (\n \n {eyebrow ? {eyebrow} : null}\n \n {title}\n \n {description ? (\n

    \n {description}\n

    \n ) : null}\n {children}\n \n );\n}\n\ntype CtaVariant = \"primary\" | \"secondary\" | \"ghost\";\n\nconst ctaBase =\n \"group/cta relative inline-flex h-11 shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-[13px] px-[18px] text-[14px] font-medium tracking-[-0.01em] transition-[transform,background-color,border-color,color] duration-150 ease-out active:scale-[0.97] motion-reduce:transition-none motion-reduce:active:scale-100\";\n\nconst ctaVariants: Record = {\n primary: \"bjork-layered-button-accent text-white\",\n secondary:\n \"border border-[color:var(--bjork-border-strong)] bg-[var(--bjork-surface)] text-[color:var(--bjork-text)] shadow-[var(--bjork-shadow-soft)] hover:border-[color:var(--bjork-text-faint)] hover:bg-[var(--bjork-surface-hover)]\",\n ghost:\n \"px-2 text-[color:var(--bjork-text-medium)] hover:text-[color:var(--bjork-text)]\",\n};\n\nexport function CtaLink({\n link,\n variant = \"primary\",\n arrow = false,\n className,\n}: {\n link: BlockLink;\n variant?: CtaVariant;\n arrow?: boolean;\n className?: string;\n}) {\n return (\n \n {link.label}\n {arrow ? (\n \n ) : null}\n \n );\n}\n\n/**\n * Fades and lifts its children the first time they scroll into view. Under reduced motion only the\n * fade runs, with no movement.\n */\nexport function Reveal({\n children,\n delay = 0,\n className,\n as = \"div\",\n}: {\n children: ReactNode;\n delay?: number;\n className?: string;\n as?: \"div\" | \"li\";\n}) {\n const reduce = useBlockReducedMotion();\n const Component = as === \"li\" ? motion.li : motion.div;\n return (\n \n {children}\n \n );\n}\n\n/** A small product mark used by the sample content. Swap it for your logo. */\nexport function SampleMark({ className }: { className?: string }) {\n return (\n \n \n \n \n \n );\n}\n", "type": "registry:component", "target": "@components/bjork-ui/blocks/marketing-kit.tsx" }, { "path": "lib/utils.ts", "content": "import { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs))\n}\n", "type": "registry:lib", "target": "@lib/utils.ts" } ], "cssVars": { "light": { "bjork-bg": "#f7f3ea", "bjork-surface": "#fffcf6", "bjork-surface-muted": "rgba(250, 246, 237, 0.94)", "bjork-surface-hover": "#f5efe3", "bjork-surface-active": "#efe7d8", "bjork-panel": "#f8f2e7", "bjork-menu": "rgba(255, 252, 246, 0.98)", "bjork-field": "rgba(255, 252, 246, 0.96)", "bjork-field-muted": "rgba(248, 242, 231, 0.82)", "bjork-field-inset": "rgba(239, 231, 216, 0.72)", "bjork-error-bg": "#fff0e8", "bjork-text": "#171717", "bjork-text-strong": "rgba(23, 23, 23, 0.9)", "bjork-text-medium": "rgba(23, 23, 23, 0.78)", "bjork-text-muted": "rgba(23, 23, 23, 0.68)", "bjork-text-soft": "rgba(23, 23, 23, 0.62)", "bjork-text-faint": "rgba(23, 23, 23, 0.22)", "bjork-inverted-text": "#fff8f0", "bjork-border": "#eee6db", "bjork-border-muted": "#f5ede2", "bjork-border-strong": "#e1d7c8", "bjork-thumb": "#a49b8e", "bjork-track": "#ded6ca", "bjork-accent": "#ec7d43", "bjork-accent-hover": "#f0935f", "bjork-accent-soft": "rgba(236, 125, 67, 0.1)", "bjork-accent-muted": "rgba(236, 125, 67, 0.2)", "bjork-accent-badge": "rgba(236, 125, 67, 0.16)", "bjork-accent-badge-foreground": "#8d421d", "bjork-accent-foreground": "#3f2112", "bjork-accent-fill": "#ec7d43", "bjork-accent-fill-hover": "#f0935f", "bjork-shadow-surface": "inset 0 7px 14px rgba(88, 72, 49, 0.045), inset 0 0.5px 0.5px rgba(255, 255, 255, 0.92), inset 1px 0 0 rgba(88, 72, 49, 0.026), inset -1px 0 0 rgba(255, 255, 255, 0.68), 0 14px 22px -9px rgba(66, 52, 33, 0.11)", "bjork-shadow-soft": "inset 0 1px 0 rgba(88, 72, 49, 0.045), inset 0 0.5px 0.5px rgba(255, 255, 255, 0.86)", "bjork-shadow-panel": "inset 0 1px 0 rgba(88, 72, 49, 0.04), inset 1px 0 0 rgba(88, 72, 49, 0.024), inset -1px 0 0 rgba(255, 255, 255, 0.64), 0 18px 38px -30px rgba(66, 52, 33, 0.2)", "bjork-shadow-menu": "inset 0 1px 0 rgba(88, 72, 49, 0.04), inset 0 12px 24px rgba(88, 72, 49, 0.022), inset 1px 0 0 rgba(88, 72, 49, 0.024), inset -1px 0 0 rgba(255, 255, 255, 0.62), 0 22px 44px -26px rgba(66, 52, 33, 0.22)", "bjork-shadow-inset": "inset 0 1px 10px rgba(88, 72, 49, 0.12), inset 0 0.5px 0.5px rgba(255, 255, 255, 0.72)", "bjork-ring-offset": "#f7f3ea" }, "dark": { "bjork-bg": "#111111", "bjork-surface": "#121212", "bjork-surface-muted": "rgba(22, 22, 22, 0.92)", "bjork-surface-hover": "#161616", "bjork-surface-active": "#202020", "bjork-panel": "#0d0d0d", "bjork-menu": "rgba(18, 18, 18, 0.98)", "bjork-field": "rgba(18, 18, 18, 0.95)", "bjork-field-muted": "rgba(18, 18, 18, 0.55)", "bjork-field-inset": "rgba(9, 9, 9, 0.75)", "bjork-error-bg": "#130d0a", "bjork-text": "#ededed", "bjork-text-strong": "rgba(237, 237, 237, 0.9)", "bjork-text-medium": "rgba(237, 237, 237, 0.72)", "bjork-text-muted": "rgba(237, 237, 237, 0.6)", "bjork-text-soft": "rgba(237, 237, 237, 0.5)", "bjork-text-faint": "rgba(237, 237, 237, 0.22)", "bjork-inverted-text": "#080808", "bjork-border": "#232323", "bjork-border-muted": "#1c1c1c", "bjork-border-strong": "#343434", "bjork-thumb": "#626262", "bjork-track": "#090909", "bjork-accent": "#ec5c13", "bjork-accent-hover": "#f07832", "bjork-accent-soft": "rgba(236, 92, 19, 0.12)", "bjork-accent-muted": "rgba(236, 92, 19, 0.24)", "bjork-accent-badge": "#b84a12", "bjork-accent-badge-foreground": "#fff2ea", "bjork-accent-foreground": "#fff2ea", "bjork-accent-fill": "#b84a12", "bjork-accent-fill-hover": "#a84a14", "bjork-shadow-surface": "inset 0 7px 14px rgba(255, 255, 255, 0.03), inset 0 0.5px 0.5px rgba(255, 255, 255, 0.06), 0 14px 20px -6px rgba(0, 0, 0, 0.45)", "bjork-shadow-soft": "inset 0 1px 0 rgba(255, 255, 255, 0.045)", "bjork-shadow-panel": "inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 18px 36px -28px rgba(0, 0, 0, 0.9)", "bjork-shadow-menu": "inset 0 1px 0 rgba(255, 255, 255, 0.055), inset 0 12px 24px rgba(255, 255, 255, 0.018), inset 0 -18px 26px rgba(0, 0, 0, 0.24), 0 22px 42px -22px rgba(0, 0, 0, 0.9)", "bjork-shadow-inset": "inset 0 1px 10px rgba(0, 0, 0, 0.45)", "bjork-ring-offset": "#080808" } }, "css": { ".bjork-range": { "box-shadow": "inset 0 1px 1px rgba(255, 255, 255, 0.04), 0 0 14px rgba(189, 69, 20, 0.06)" }, ".bjork-range::-webkit-slider-thumb": { "appearance": "none", "width": "16px", "height": "8px", "border": "0", "border-radius": "999px", "background": "var(--bjork-thumb)", "box-shadow": "inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.42)" }, ".bjork-range::-moz-range-thumb": { "width": "16px", "height": "8px", "border": "0", "border-radius": "999px", "background": "var(--bjork-thumb)", "box-shadow": "inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.42)" }, ".bjork-layered-button-accent, .bjork-layered-button-raised": { "position": "relative", "isolation": "isolate", "appearance": "none", "overflow": "hidden", "border": "0", "border-radius": "13px", "box-shadow": "inset 0 1px 0 #ffffff38, 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a", "transition": "filter 150ms ease-out, box-shadow 150ms ease-out" }, ".bjork-layered-button-accent::after, .bjork-layered-button-raised::after": { "position": "absolute", "inset": "0", "pointer-events": "none", "content": "\"\"", "border": "1.5px solid transparent", "border-radius": "inherit", "background": "linear-gradient(#ffffffb8, #0000003d 41% 75%, #ffffff47) border-box", "mix-blend-mode": "overlay", "-webkit-mask-image": "linear-gradient(#000, #000), linear-gradient(#000, #000)", "mask-image": "linear-gradient(#000, #000), linear-gradient(#000, #000)", "-webkit-mask-clip": "padding-box, border-box", "mask-clip": "padding-box, border-box", "-webkit-mask-origin": "padding-box, border-box", "mask-origin": "padding-box, border-box", "-webkit-mask-composite": "xor", "mask-composite": "exclude" }, ".bjork-layered-button-accent": { "color": "oklch(100% 0 0)", "text-shadow": "0 -1px #00000040", "background": "radial-gradient(ellipse at -20px top, rgba(255, 255, 255, 0.14), transparent), linear-gradient(180deg, #ec5c13 0%, #ec5c13 62%, color-mix(in oklab, #ec5c13 84%, black 16%) 100%)" }, ".bjork-layered-button-raised": { "color": "oklch(100% 0 0)", "text-shadow": "0 -1px #00000026", "background": "radial-gradient(ellipse at -20px top, #ffffff38, #fff0), linear-gradient(180deg, oklch(0.1881 0.006 265), oklch(0.5493 0.0081 265))" }, ".dark .bjork-layered-button-raised": { "color": "oklch(0.2574 0.0056 265)", "text-shadow": "0 -1px #00000026", "background": "radial-gradient(ellipse at -20px top, #ffffff38, #fff0), linear-gradient(180deg, color-mix(in oklab, oklch(0.9674 0.0013 265) 80%, oklch(0.2574 0.0056 265) 20%), color-mix(in oklab, oklch(0.669 0.0107 265) 80%, oklch(0.2574 0.0056 265) 20%))" }, "@media (hover: hover)": { ".bjork-layered-button-accent:hover": { "filter": "brightness(1.08) saturate(1.04)" }, ".bjork-layered-button-raised:hover": { "filter": "brightness(1.08) contrast(0.9)" } } }, "meta": { "collection": "Blocks", "registryUrl": "https://ui.isaiahbjork.com/marketing-feature-bento.json", "installCommand": "npx shadcn@latest add https://ui.isaiahbjork.com/marketing-feature-bento.json" }, "type": "registry:block" }