Code Showcase

Files:

• index.html: the demo page. The section is everything from <section class="cshow" data-code-showcase …> to its closing </section>.
• assets/style.css: all styles, scoped to .cshow.
• assets/script.js: the behaviour (readable source).

Dependencies: GSAP 3.15.0 core (no plugins) and two Google Fonts, Azeret Mono and JetBrains Mono. No syntax highlighter or theme file: the script colours the code itself. No build step.

In your downloadThe working code for this step, in index.html.

The script mounts every [data-code-showcase] on the page when the DOM is ready. The <style> block in the demo's <head> only colours the demo page and is not needed.

The one-line inline <script> inside the section adds cshow--pending, which lays the editor out the way the script will (first language, last step) and hides the parts that reveal on scroll, so nothing flashes before the script runs. It gives up after four seconds if the main script or GSAP never arrives, leaving the full listing. Keep it if you can.

Copy and actions

The label, heading, paragraph, the two links and the note are plain HTML at the top of .cshow__intro. Point the https://example.com/... links at your sign-up page and API reference, and rewrite or delete the "fictional sample data" note. The heading is an h2; change the tag freely, but keep its id matching the section's aria-labelledby.

Install command

The command shown first is the text inside <span data-cshow-install>. Each language panel carries its own command and label, which replace it when that tab is chosen:

In your downloadThe working code for this step, in index.html.

Keep the first panel's values the same as the markup inside data-cshow-install so nothing changes on load. The copy button copies exactly what is shown.

Code

Every snippet is ordinary text inside a <code data-lang="…">. Edit it as text; escape <, > and & as <, > and &. Indent with spaces.

data-lang picks the colouring rules: js, py, go, sh (shell and cURL) or json. Any other value shows the code uncoloured. The rules are a short list near the top of assets/script.js (LANGS); add a keyword to a list, or copy a language entry to add another one (for example rb for Ruby).

Languages and steps

The structure is a grid of languages and steps:

• A language is one tab button <button role="tab" data-cshow-tab="go">Go</button> plus one panel <div class="cshow__panel" data-cshow-panel="go">, with matching keys. Add, remove or reorder both together. The first panel is shown first. With one language the tabs hide themselves.
• A step is one step button <button data-cshow-step="2">, one <div class="cshow__snippet" data-step="2"> inside every panel, and one <div class="cshow__result" data-step="2"> in the response area. The last step is shown first, since it carries the payoff. With one step the step bar hides itself. Two to four steps fit the bar; more than four get cramped on phones.
• Inside each snippet and result, the small <p data-cshow-nojs> captions are only shown when JavaScript is off, so the full listing stays labelled. Keep them in step with the button text.
• Give each snippet a distinct aria-label (it is a scrollable region that keyboard users can focus).

Responses

Each result's request line comes from its attributes:

In your downloadThe working code for this step, in index.html.

data-status is shown in the pill (a 4xx or 5xx status turns its dot red), and data-latency is the number of milliseconds the counter reaches. The response body is plain JSON text in <code data-lang="json">. These are simulated: nothing is sent over the network. To show a CLI instead, use data-lang="sh" for the snippets and plain text for the output, and set the method and path to the command.

Brand variables

All on .cshow in assets/style.css:

Variable	Default	Controls
--cshow-ground	#f3f2ec	Section background
--cshow-ink / --cshow-muted	#121212 / #4a4944	Text; also the selected step fill
--cshow-rule / --cshow-rule-soft	#121212 / ink at 16%	Frames and inner dividers
--cshow-editor / --cshow-response	#fbfaf6 / #ecebe3	Editor and response grounds
--cshow-accent / --cshow-on-accent	#f2551d / #121212	Primary button, tab indicator, Copied state, label rule
--cshow-link	#1650c9	Focus ring
--cshow-ok / --cshow-error	green / red	Status dot
--cshow-t-com … --cshow-t-prop	see file	Syntax colours: comments, strings, keywords, literals, calls, types, properties
--cshow-display / --cshow-mono	Azeret Mono / JetBrains Mono	Heading; everything else
--cshow-width	1280px	Content width
--cshow-code-size	13.5px (12.5px narrow)	Code size

Every syntax colour is at least 4.5:1 against both the editor and the response grounds. A dark rebrand needs the grounds, ink, rules and all seven syntax colours changed together, plus color-scheme:dark on .cshow; check the contrast of each token colour afterwards.

• Switching: a tab or step change finishes any running transition, fades the old code, wipes each new line in from the left (longer lines take slightly longer) and then runs the request. Clicking quickly settles on the last choice.
• Request: the pill reads Sending, the latency counts up, then the pill shows the status and the response lines rise in. Send again replays it.
• Height: the editor reserves the height of the longest snippet and the longest response, so switching never moves the page.
• Reveal: the first time a fifth of the section is on screen, the intro rises in, the editor wipes open, the code types in and the request runs.
• API: window.CodeShowcase has mount(root), mountAll(scope), destroy(root) and get(root). get(root) returns { select(languageKey, step), run(), destroy() }. destroy removes listeners and observers, kills tweens and timers, puts every code block back to its original text and returns the section to the plain listing.

• Language tabs follow the ARIA tabs pattern: Tab reaches the selected tab, arrow keys, Home and End move and select.
• Step buttons mark the current one with aria-current="step".
• Copy buttons announce "Install command copied" or "Go code for Quote rates copied" through a polite live region; a failed copy says so. Copying works with the Clipboard API on HTTPS and falls back to a selection copy elsewhere.
• Each finished request announces its status, method, path and latency politely.
• Code and response blocks are focusable scroll regions; long lines scroll sideways inside the editor, never the page. They are ordinary nested scrollers, so smooth-scroll libraries need no special attribute.
• Reduced motion: no reveal, instant swaps and instant results. Changing the setting while the page is open is followed.
• Without JavaScript, or if GSAP fails to load, every language, step and response is listed in full with labels.
• The layout responds to the section's own width (container queries): two columns from 960px, stacked below, with smaller code under 600px. It works in a narrow column of a host page; several instances can share a page, and a duplicated heading id is made unique automatically.
• The section never changes the host page's scrolling or cursor.

• GSAP 3.15.0 core, loaded from jsDelivr.
• Azeret Mono and JetBrains Mono, SIL Open Font License, from Google Fonts.
• No images. The Shiprate API, carriers, shop, keys and responses are invented for this demo.