Playground v2

The Curious Fox's Evening

The quick brown fox, feeling uncharacteristically reflective, juggled a dozen quirky phrases before breakfast. He zipped across the meadow, vexing lazy dogs and dazzling every jittery jay perched on the crooked fence. By noon, he had questioned the value of his own velocity — how fast is fast enough, really, when time keeps leaping ahead?

As twilight arrived, the fox paused beside a pond shimmering with violet light. "Zoe's zebra quilt" he murmured, remembering the oddest gift he'd ever received, stitched from every hue and letter imaginable. He traced the embroidered alphabets with his paw — A through Z, upper and lower case — and decided perhaps the world wasn't made to be outrun, only read carefully.

The Typographer's Tale

A joyful mix of vowels and consonants spilled across the designer's desk, each waiting for its moment in print. "Pack my box with five dozen liquor jugs", she whispered — the old standby — then laughed, unsatisfied. She needed something wilder, something that stretched the tails of the g, y, and q without breaking the harmony of the line.

She tried again: "Jovial zebras quickly faxed quirky diplomas while vexed owls judged the kerning". Better. The counters breathed, the ligatures sang, and the spacing shimmered like music. The typeface, for a fleeting second, felt alive.

Pangram Prose

Sphinx of black quartz, judge my vow! A phrase both noble and nonsensical, yet it tests every serif and stroke. Jackdaws love my big sphinx of quartz — another line that rolls through diagonals, bowls, and crossbars. The typist's fingers flutter like a pianist's, exploring how each curve meets its neighbor.

Meanwhile, the jaded wizard quickly vexes the bold dwarf. The vowels glow, the descenders dip, and punctuation pirouettes between words: commas, colons, semicolons — all demand balance. For font makers, this is meditation in motion: every line a microcosm of contrast, texture, and rhythm.

Unordered List

• Item 1
  • Sub-item 1
  • Sub-item 2
• Item 2
  • Sub-item 1
  • Sub-item 2
    • Sub-sub-item 1
    • Sub-sub-item 2
• Item 3

Ordered List

1. First item
   1. Sub-item 1
   2. Sub-item 2
2. Second item
   1. Sub-item 1
   2. Sub-item 2
      1. Sub-sub-item 1
      2. Sub-sub-item 2
3. Third item

Header 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dignissim arcu sit amet ullamcorper malesuada. Phasellus quis posuere sem, nec euismod nisi. Quisque a risus fermentum, venenatis elit ac, mattis magna. Nulla facilisi. Donec mauris leo, viverra et erat at, sollicitudin interdum mi. Phasellus cursus orci vel eleifend viverra. Curabitur eleifend tristique ipsum eu sagittis. Quisque vitae augue cursus, luctus nisi vitae, mattis neque. Aenean euismod erat sed eros consequat, sed elementum justo luctus. Cras faucibus id ex in ornare. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;

This is a really long one ugh, like really really long to test wrapping and the sort (should be at Header 3 depth)

Mauris ac convallis ligula. Phasellus nec ultricies libero, vel bibendum nunc. Ut id nibh leo. Pellentesque cursus nunc non facilisis ultrices. Praesent vel fermentum nibh. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam quis vulputate sapien, vitae vehicula odio. Nunc eget ante vitae nibh aliquet euismod. Vestibulum sagittis lacinia urna, nec dapibus purus sollicitudin in. Proin accumsan arcu leo, id egestas tellus tristique vel. Mauris ultricies luctus maximus. Nullam blandit lacinia felis, sed placerat sem sagittis varius. Sed ut arcu nec massa molestie fermentum vitae quis sem. Etiam id urna quis ipsum volutpat tempus et vel felis.

Vivamus vel bibendum eros. Nulla varius faucibus ex, nec congue urna ornare sit amet. Pellentesque in elit aliquam est vehicula scelerisque ac vel risus. Nulla facilisis nec mauris ac fringilla. Cras dignissim ultricies vulputate. Nam a odio lorem. Integer sit amet velit libero. Sed convallis ex sit amet nibh blandit, id facilisis velit luctus. Aliquam erat volutpat. Mauris tincidunt lacinia erat, quis pellentesque nisl.

Proin dapibus mollis libero id viverra. Proin efficitur id nunc vitae semper. Aenean feugiat pulvinar eros vitae dictum. Donec tincidunt facilisis fringilla. Sed semper suscipit dictum. Etiam sed quam at sem egestas convallis at quis eros. Mauris et laoreet odio. Ut orci dui, malesuada pretium iaculis id, pretium eget magna. Etiam tellus est, imperdiet in posuere sed, venenatis venenatis eros. Mauris risus est, suscipit eu luctus a, pellentesque nec tellus. Sed quis urna fringilla, vestibulum urna id, dictum arcu. Mauris lectus odio, faucibus eget est at, maximus sodales ipsum.

Inline Code

Because code should exist within words too. Awkward if the next line also had a codeblock (for safety sake, a second codeblocks) and the blocks touched

Hmmm

Some backticks for inline.

backtick.fences("for blocks")

import * as React from "react"
import { ScrollArea } from "@base-ui-components/react/scroll-area"

export default function ExampleScrollArea() {
  return (
    <ScrollArea.Root className="h-[8.5rem] w-96 max-w-[calc(100vw-8rem)]">
      <ScrollArea.Viewport className="outline-gray-200 focus-visible:outline-blue-800 h-full overscroll-contain rounded-md outline outline-1 -outline-offset-1 focus-visible:outline focus-visible:outline-2">
        <div className="text-sm text-gray-900 flex flex-col gap-4 py-3 pr-6 pl-4 leading-[1.375rem]">
          <p>
            Vernacular architecture is building done outside any academic tradition, and without
            professional guidance. It is not a particular architectural movement or style, but
            rather a broad category, encompassing a wide range and variety of building types, with
            differing methods of construction, from around the world, both historical and extant and
            classical and modern. Vernacular architecture constitutes 95% of the world's built
            environment, as estimated in 1995 by Amos Rapoport, as measured against the small
            percentage of new buildings every year designed by architects and built by engineers.
          </p>
          <p>
            This type of architecture usually serves immediate, local needs, is constrained by the
            materials available in its particular region and reflects local traditions and cultural
            practices. The study of vernacular architecture does not examine formally schooled
            architects, but instead that of the design skills and tradition of local builders, who
            were rarely given any attribution for the work. More recently, vernacular architecture
            has been examined by designers and the building industry in an effort to be more energy
            conscious with contemporary design and construction—part of a broader interest in
            sustainable design.
          </p>
        </div>
      </ScrollArea.Viewport>
      <ScrollArea.Scrollbar className="bg-gray-200 pointer-events-none m-2 flex w-1 justify-center rounded opacity-0 transition-opacity delay-300 data-[hovering]:pointer-events-auto data-[hovering]:opacity-100 data-[hovering]:delay-0 data-[hovering]:duration-75 data-[scrolling]:pointer-events-auto data-[scrolling]:opacity-100 data-[scrolling]:delay-0 data-[scrolling]:duration-75">
        <ScrollArea.Thumb className="bg-gray-500 w-full rounded" />
      </ScrollArea.Scrollbar>
    </ScrollArea.Root>
  )
}