Skip to content

feat: refresh web landing story and docs shell #9

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
keypad merged 6 commits into from
Feb 17, 2026
+1,343 −443
Merged

feat: refresh web landing story and docs shell #9

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
71b7342
feat: redesign landing shell and components
crush Feb 17, 2026
9acde30
fix: remove rounded docs shell
crush Feb 17, 2026
64dbc40
feat: restyle story page with full-width narrative
crush Feb 17, 2026
6aa63f6
chore: format web ui files
crush Feb 17, 2026
f5b4e59
fix: stabilize web typecheck script
crush Feb 17, 2026
8d37c01
fix: generate docs source before web typecheck
crush Feb 17, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions bun.lock
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

8 changes: 4 additions & 4 deletions packages/web/app/docs/docs.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
.docs-panel #nd-docs-layout {
--fd-docs-height: calc(100dvh - var(--docs-pad) * 2 - 2px) !important;
--fd-docs-height: 100dvh !important;
min-height: unset !important;
height: var(--fd-docs-height) !important;
max-height: var(--fd-docs-height) !important;
Expand Down Expand Up @@ -75,9 +75,9 @@
[data-state][class*="shadow-lg"][class*="end-0"] {
background: #0a0a0a !important;
border-left: 1px solid rgba(255, 255, 255, 0.07) !important;
border-radius: var(--panel-radius) 0 0 var(--panel-radius) !important;
margin: var(--docs-pad) 0 var(--docs-pad) 0 !important;
height: calc(100dvh - var(--docs-pad) * 2) !important;
border-radius: 0 !important;
margin: 0 !important;
height: 100dvh !important;
top: 0 !important;
bottom: 0 !important;
}
Expand Down
37 changes: 16 additions & 21 deletions packages/web/app/docs/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,27 +5,22 @@ import "./docs.css"

export default function Layout({ children }: { children: ReactNode }) {
return (
<div className="h-dvh bg-[#f5f3ef] p-[var(--docs-pad)] overflow-hidden">
<div className="docs-panel relative rounded-[var(--panel-radius)] border border-white/10 overflow-hidden h-full">
<div className="panel-bg absolute inset-0" />
<div className="grain absolute inset-0 pointer-events-none" />

<div className="relative z-0 h-full overflow-hidden rounded-[var(--panel-radius)]">
<DocsLayout
tree={source.getPageTree()}
nav={{
title: "cruel",
url: "/",
}}
links={[
{ text: "story", url: "/story" },
{ text: "github", url: "https://github.com/visible/cruel" },
]}
themeSwitch={{ enabled: false }}
>
{children}
</DocsLayout>
</div>
<div className="docs-panel h-dvh overflow-hidden bg-[#100E0E]">
<div className="relative z-0 h-full overflow-hidden">
<DocsLayout
tree={source.getPageTree()}
nav={{
title: "cruel",
url: "/",
}}
links={[
{ text: "story", url: "/story" },
{ text: "github", url: "https://github.com/visible/cruel" },
]}
themeSwitch={{ enabled: false }}
>
{children}
</DocsLayout>
</div>
</div>
)
Expand Down
56 changes: 56 additions & 0 deletions packages/web/app/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,9 @@
@import "fumadocs-ui/css/preset.css";

@theme {
--font-sans:
"Geist Sans", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial,
"Apple Color Emoji", "Segoe UI Emoji";
--font-mono: "Geist Mono", ui-monospace, monospace;
}

Expand Down Expand Up @@ -51,6 +54,48 @@
color: #0a0a0a;
}

@keyframes cursor-fade-up {
from {
opacity: 0;
transform: translate3d(0, 14px, 0);
filter: blur(0.5px);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
filter: blur(0);
}
}

.cursor-landing {
--cursor-accent: #ff8a3d;
--cursor-accent-soft: rgba(255, 138, 61, 0.14);
}

.cursor-fade-up {
animation: cursor-fade-up 700ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes cursor-shimmer {
0% {
background-position: 0% 50%;
}
100% {
background-position: 100% 50%;
}
}

.animate-shimmer {
animation: cursor-shimmer 1400ms linear infinite;
}

@media (prefers-reduced-motion: reduce) {
.cursor-fade-up,
.animate-shimmer {
animation: none;
}
}

.grain::before {
content: "";
position: absolute;
Expand Down Expand Up @@ -80,3 +125,14 @@
width: 0;
height: 0;
}

.cursor-terminal-scroll {
scrollbar-width: none;
-ms-overflow-style: none;
}

.cursor-terminal-scroll::-webkit-scrollbar {
display: none;
width: 0;
height: 0;
}
5 changes: 3 additions & 2 deletions packages/web/app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { Analytics } from "@vercel/analytics/react"
import { RootProvider } from "fumadocs-ui/provider/next"
import { GeistMono } from "geist/font/mono"
import { GeistSans } from "geist/font/sans"
import type { Metadata, Viewport } from "next"
import "./globals.css"

Expand Down Expand Up @@ -41,8 +42,8 @@ export const viewport: Viewport = {

export default function Layout({ children }: { children: React.ReactNode }) {
return (
<html lang="en" className={`${GeistMono.variable} dark`}>
<body className="font-mono antialiased bg-[#f5f3ef]">
<html lang="en" className={`${GeistSans.variable} ${GeistMono.variable} dark`}>
<body suppressHydrationWarning className="font-sans antialiased bg-[#100E0E] text-white">
<RootProvider
theme={{ defaultTheme: "dark", enabled: false }}
search={{
Expand Down
189 changes: 16 additions & 173 deletions packages/web/app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,179 +1,22 @@
import { readFile } from "node:fs/promises"
import { join } from "node:path"
import Link from "next/link"

const code = `import { cruel } from "cruel"

const api = cruel(fetch, {
fail: 0.1,
delay: [100, 500],
timeout: 0.05,
})

const res = await api("https://api.example.com")`

async function version(): Promise<string> {
const paths = [
join(process.cwd(), "../cruel/package.json"),
join(process.cwd(), "packages/cruel/package.json"),
]

for (const path of paths) {
try {
const file = await readFile(path, "utf8")
const data: unknown = JSON.parse(file)
if (typeof data === "object" && data !== null) {
const value = Reflect.get(data, "version")
if (typeof value === "string" && value.length > 0) return `v${value}`
}
} catch {}
}

return "v0.0.0"
}

export default async function Page() {
const tag = await version()
import { CursorFrontier } from "../components/landing/cursor-bento"
import { CursorFeatures } from "../components/landing/cursor-features"
import { CursorFooter } from "../components/landing/cursor-footer"
import { CursorHero } from "../components/landing/cursor-hero"
import { CursorNav } from "../components/landing/cursor-nav"

export default function Page() {
return (
<main className="h-dvh bg-[#f5f3ef] flex items-center justify-center p-[var(--docs-pad)]">
<div className="relative w-full h-full rounded-[var(--panel-radius)] border border-white/10 overflow-hidden">
<div className="panel-bg absolute inset-0" />
<div className="grain absolute inset-0 pointer-events-none" />
<div className="hidden sm:block absolute inset-[10px] rounded-[calc(var(--panel-radius)-6px)] border border-white/[0.06] pointer-events-none" />
<div className="sm:hidden absolute bottom-14 right-5 z-10">
<Star />
</div>

<div className="relative z-10 h-full grid grid-rows-[1fr_auto]">
<div className="flex flex-col sm:grid sm:grid-cols-[1fr_auto] p-5 sm:p-8 pt-6 sm:pt-10">
<div className="flex flex-col justify-between gap-8 sm:gap-0">
<div className="flex flex-col gap-4 sm:gap-5">
<div className="text-[10px] uppercase tracking-[0.3em] text-white/20 font-medium">
chaos engineering
</div>
<h1 className="text-[clamp(48px,12vw,96px)] font-bold leading-[0.88] tracking-[-0.045em] text-white/90">
cruel
</h1>
<p className="text-[13px] leading-[1.55] text-white/35 max-w-[260px] mt-1">
inject failures, latency, and timeouts into any async function. works with fetch,
ai sdks, databases, anything.
</p>
</div>

<div className="hidden sm:block">
<pre className="text-[11px] leading-[1.75] font-mono">
{code.split("\n").map((line, i) => (
<div key={`${i}-${line}`}>{tokenize(line)}</div>
))}
</pre>
</div>
</div>

<div className="flex flex-row sm:flex-col justify-between sm:justify-between items-start sm:items-end">
<nav className="flex flex-row sm:flex-col items-start sm:items-end gap-3 sm:gap-2.5 sm:mt-2">
{[
{ href: "/docs", label: "Docs", ext: false },
{ href: "/story", label: "Story", ext: false },
{ href: "https://github.com/visible/cruel", label: "Github", ext: true },
{ href: "https://www.npmjs.com/package/cruel", label: "npm", ext: true },
].map((l) => {
const cls =
"text-[13px] text-white/45 underline decoration-white/15 underline-offset-[3px] decoration-[1px] hover:text-white/80 hover:decoration-white/40 transition-all duration-300"
return l.ext ? (
<a
key={l.label}
href={l.href}
target="_blank"
rel="noopener noreferrer"
className={cls}
>
{l.label}
</a>
) : (
<Link key={l.label} href={l.href} className={cls}>
{l.label}
</Link>
)
})}
</nav>

<div className="hidden sm:block">
<Star />
</div>
</div>
</div>

<div className="mx-2 sm:mx-[10px] mb-2 sm:mb-[10px] rounded-b-[calc(var(--panel-radius)-8px)] border-t border-white/[0.06] h-[44px] sm:h-[48px] flex items-center justify-between px-4 sm:px-5 text-[11px] sm:text-[12px]">
<div className="text-white/20 italic">{tag}</div>
<div className="text-white/35 select-all cursor-text">
<span className="text-white/15 select-none">$ </span>
bun add cruel
</div>
</div>
</div>
<main className="cursor-landing relative isolate min-h-screen bg-[#100E0E] text-white selection:bg-white/20 selection:text-white">
<div className="pointer-events-none absolute inset-y-0 left-0 right-0 hidden md:block">
<div className="mx-auto h-full max-w-[1320px] border-x border-x-white/14" />
</div>
<div className="relative z-10">
<CursorNav />
<CursorHero />
<CursorFeatures />
<CursorFrontier />
<CursorFooter />
</div>
</main>
)
}

function Star() {
return (
<div className="relative w-[32px] h-[32px] sm:w-[40px] sm:h-[40px] opacity-[0.12]">
<div className="absolute inset-0 m-auto w-px h-full bg-white" />
<div className="absolute inset-0 m-auto w-full h-px bg-white" />
<div className="absolute inset-0 m-auto w-px h-full bg-white rotate-45" />
<div className="absolute inset-0 m-auto w-full h-px bg-white rotate-45" />
</div>
)
}

function tokenize(line: string): React.ReactNode {
if (!line.trim()) return "\u00A0"

const out: React.ReactNode[] = []
let rest = line
let k = 0

const rules: [RegExp, string][] = [
[/^(import|from|const|await)\b/, "text-white/20"],
[/[{}[\]()]/, "text-white/12"],
[/"[^"]*"/, "text-white/40"],
[/\b(cruel|fetch)\b/, "text-white/70"],
[/\b\d+(\.\d+)?\b/, "text-white/30"],
[/[:,.]/, "text-white/12"],
[/=/, "text-white/15"],
]

while (rest.length > 0) {
let hit: { i: number; n: number; c: string } | null = null
for (const [re, c] of rules) {
const m = rest.match(re)
if (m?.index !== undefined && (!hit || m.index < hit.i)) {
hit = { i: m.index, n: m[0].length, c }
}
}
if (!hit) {
out.push(
<span key={k++} className="text-white/22">
{rest}
</span>,
)
break
}
if (hit.i > 0)
out.push(
<span key={k++} className="text-white/22">
{rest.slice(0, hit.i)}
</span>,
)
out.push(
<span key={k++} className={hit.c}>
{rest.slice(hit.i, hit.i + hit.n)}
</span>,
)
rest = rest.slice(hit.i + hit.n)
}

return out
}
Loading