Rebuild the landing page SDK card in HTML/CSS, with Swift and Rust as real tabs

[devin-ai-integration]

Summary

The SDK mockup on /learn/home was a Rive canvas (sdk-rive.riv, hosted on the Webflow CDN). Its state machine only defines TypeScript, Python, GO, Java, NET, PHP and Ruby; Swift and Rust are inert grey artwork with no hover, no active state and no install string, and nothing in this repo can change that. This replaces the canvas with plain markup + CSS, so all nine languages are real tabs.

How it works:

• Nine visually hidden <input type="radio"> at the top of .sdk-card, one <label> per language. Selection is CSS-only — #sdk-card-<lang>:checked ~ .sdk-card-tabs sets --tab-index / --underline-width (the sliding green underline) and ~ .sdk-card-command .sdk-card-command-<lang> reveals that language's install string. No JS, no hydration, works on preview deployments, and the radios give arrow-key navigation for free.
• Every dimension is calc(N * var(--u)) where --u: 0.271003cqw — one unit of the Rive artboard's 369×93 grid, with the card as a container query container. N is the measurement taken off the rendered .riv, so the layout is the artboard's geometry rather than an approximation, and it scales with the card like the canvas did.
• The outer border is an inset box-shadow rather than a real border: with aspect-ratio: 369/93 a 1px border would shrink the content box below 93u and drag every row off the grid.
• Swift and Rust get commands the artboard never had: .package(url: "https://github.com/your-company/swift-sdk") (SwiftPM has no registry) and cargo add your-company.
• Drops the SDK entry from rive-animation.js; the Docs and Ask Fern canvases are untouched.

Two known deltas from the artboard: the labels/commands render in the site's var(--font-code) stack instead of the artboard's JetBrains Mono (advance widths match, so the layout is identical; glyph shapes differ), and the intro wipe/typing animation is gone.

Reference (Rive) on top, this PR below — light TypeScript and dark Ruby:

Link to Devin session: https://app.devin.ai/sessions/3f1fa02d46d94431b1331d3d9ae97933

[devin-ai-integration]

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

• Address comments on this PR. Add '(aside)' to your comment to have me ignore it.
• Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

• Disable automatic comment, CI, and merge conflict monitoring

[github-actions]

🌿 Preview your docs: https://fern-preview-devin-1785978439-sdk-swift-rust-tabs.docs.buildwithfern.com/learn

Here are the markdown pages you've updated:

• learn/home

[devin-ai-integration]

Runtime test results — rebuilt SDK card

Tested on a local fern docs dev preview of this branch at /learn/home, in light mode, dark mode and narrow viewports. Devin session

✅ All nine tabs work — Swift and Rust are live

Every tab moves the green underline and swaps the install command; only one command is visible at a time. Swift and Rust, previously dead grey artwork, are now fully selectable.

Swift	Rust

Hover (scale + pointer cursor, no layout shift), arrow-key navigation with a visible focus ring, dark mode (card background, underline and Rust logo variant all switch), and ~520px / ~286px widths (all nine tabs stay on one row, no wrapping or overlap) all pass.

🔧 Fixed during testing: .NET command rendered an em dash

The run caught MDX smart punctuation converting --version into —version (char code 8212), which made the .NET command non-copy-pasteable. Wrapping the string in a JSX expression fixes it; re-verified in the browser that the rendered text now contains a literal --version and no non-ASCII characters.

⚠️ Rive regression check — structural only

No console errors related to the card or Rive. The SDK canvas is gone as intended; #docs-rive-canvas and #ai-rive-canvas remain and both .riv files are still fetched.

Neither remaining animation actually paints in the local dev preview — but the same is true on the pre-PR baseline commit 30802a8e6, where all three canvases are blank, so this is a local-preview limitation rather than a regression. Worth a quick look on a deployed preview.

Pre-PR baseline (blank)	This PR (SDK card now real markup)

[devin-ai-integration]

Runtime re-test — SDK card reveal geometry fix

Re-tested 067b8f129 on a local fern docs dev preview at /learn/home, light and dark, on real hard reloads at real speed, with frames extracted from a screen recording plus a 10× slow-motion override for confirmation. Devin session

✅ The reveal is now strictly monotonic — the flash/hide/return is gone

The first painted frame of the card is fully covered in both themes — no tab, separator or command text visible anywhere, including at the right edge. Across consecutive frames the front moves monotonically left → right and each tab appears exactly once. Ruby/Swift/Rust no longer paint, get swallowed and reappear.

Light mode, real speed	Dark mode, real speed

Dark mode shows no white or light-grey flash: the curtain is painted in the dark card and command-row tones throughout. Tabs still fade up as the soft edge passes, the Typescript command still types in after the reveal starts, and the settled state is unchanged.

The earlier defect was that .sdk-card-intro was inset: 0 and animated translateX(-34.5%) → translateX(100%), so at t = 0 the curtain spanned only -34.5% … 65.5% of the card and the right ~34.5% was never covered. It is now sized wider than the card and starts flush with it, with the mask ramp and the translation sharing one basis in the card's --u grid units.

✅ The wider curtain fully clears at narrow widths, with no extra scroll width

Measured after the animation settled on a hard reload at each width:

Viewport	Card	intro.left	card.right	Cleared	scrollWidth/clientWidth	H-scrollbar	Tab rows	Copy inside
540px	509px	525	525	yes	540 / 540	no	1	yes
296px	264px	280	280	yes	296 / 296	no	1	yes

The curtain's left edge lands exactly on the card's right edge, so there is no residual band, and scrollWidth == clientWidth confirms it adds no scroll width and no horizontal scrollbar.

One unrelated note: at a mid viewport (~887px) the document does have scrollWidth 903 > clientWidth 887, but this is pre-existing and not the curtain — the value is identical with .sdk-card-intro hidden, and it comes from the .dashed-pattern-right decoration.

Console and known local limitations

Console is clean: 28 entries, all logs, zero errors or warnings — only the Fern branding banner and dev WebSocket logs. Nothing mentioning sdk-card, mask, clip-path or overflow.

The dev-only React double-mount (intro playing twice) and the blank Docs/Ask Fern Rive canvases are treated as known local-preview behaviour, so the two remaining Rive animations were verified structurally only, not by observing live motion.