prototype.rs

In a rain-soaked potting shed where moss grows on terracotta and beetles collect in glass jars, someone has set up a laptop. The keyboard sits between ferns and fungi samples. This is the origin of prototype.rs — a system for building systems using the materials at hand: raw, unrefined, found from the forest floor.

// The first prototype is always imperfect.
// That imperfection is the material itself.
fn build_from_found_materials() {
    let bark = collect_fallen_wood();
    let moss = cultivate_growth();
    let stone = polish_with_time();
}

Goblincore celebrates the chaotic order of nature — moss-covered rocks, tarnished keys, mushroom clusters, rain-soaked wood. prototype.rs applies this sensibility to technology. We build not with sterilized dark-mode editors, but with materials that carry the history of their origin.

The F-pattern is how eyes naturally sweep across a page: left to right across the top, then down the left edge, dipping rightward for content blocks. In a forest, the eye follows edges — the tree line, the clearing, the path.

Here, content flows down the left side, leaving a wide right margin that becomes the "forest edge" — a space where decorative elements live without crowding the tutorial. This margin is not negative space; it is inhabited space, filled with watercolor moss patches and celestial markers.

// F-pattern navigation
// Content: left-aligned, max-width: 1100px
// Margin: right side, reserved for forest-edge decoration

const layout = {
    container: { marginLeft: "clamp(48px, 8vw, 120px)" },
    rightMargin: "where stars pulse and moss grows"
};

JetBrains Mono carries the warmth of humanist design while serving code. Its distinctive ligatures and slightly softened mono grid feel like a botanist's carefully annotated field notes. For body text, Crimson Pro evokes the old-style serifs of a well-loved journal — warm, refined, designed for sustained reading.

// Headings: JetBrains Mono weight 700
// Body: Crimson Pro weight 400
// Annotations: Crimson Pro weight 300 italic

// clamp(min, vw, max) for responsive scaling
--font-size-h1: clamp(2.2rem, 5vw, 3.8rem);
--font-size-h2: clamp(1.3rem, 2.5vw, 1.8rem);
--font-size-body: clamp(1.05rem, 1.5vw, 1.2rem);

The combination creates a field journal aesthetic — marginalia in monospace code sitting alongside refined serif prose. Technical and botanical. Precise and organic.

Every color maps to a natural material found underfoot:

--color-bg: #F5F0E8;              // Aged parchment
--color-bg-alt: #EDE6DA;         // Darker parchment
--color-surface: #E8E0D4;        // Weathered paper
--color-moss: #6B7F5A;           // Code green
--color-bark: #8B6B4A;           // Strings
--color-lichen: #A0936B;         // Comments
--color-text: #3A3428;           // Deep earth
--color-text-secondary: #6B6254; // Warm stone
--color-border: #7A6B5A;         // Twig brown
--color-star: #C4A86E;           // Pale gold

All illustrative elements are CSS-generated watercolors: soft-edged, translucent shapes that bleed slightly beyond their bounds. They appear as section backgrounds, margin decorations, and accent elements. Each is slightly different in shape and opacity, creating organic variation without raster imagery.

// Watercolor blob via CSS gradient
.watercolor {
    border-radius: 40% 60% 50% 50% / 60% 40% 50% 50%;
    background: radial-gradient(
        ellipse,
        rgba(107, 127, 90, 0.15),
        transparent 70%
    );
    filter: blur(2px);
}

This approach maintains visual richness while keeping load times minimal — no image assets, purely CSS. The organic randomness of border-radius values creates natural variation across the page.

Small star-shaped SVGs serve as both functional navigational markers and decorative accents. They pulse with a gentle scale oscillation — not synchronized, but individually phase-offset like fireflies. Each star has its own rhythm, creating an organic, breathing quality to the page.

// Star pulse with phase offset
@keyframes star-pulse {
    0%, 100% { 
        transform: scale(1); 
        opacity: 0.7; 
    }
    50% { 
        transform: scale(1.15); 
        opacity: 1; 
    }
}

// Each star gets random animation-delay: 0s to 3s
// Creates asynchronous pulsing effect

Stars come in three sizes: small (12px), medium (20px), and large (32px). The large stars mark major section boundaries; small stars scatter as decorative dust throughout the margins.

Code blocks are styled to resemble bark-texture cards with minimal rounded corners (bark does not round). A dashed border frames each specimen, with horizontal grain lines simulating wood grain. Code text uses nature-themed syntax highlighting: moss green for keywords, bark brown for strings, lichen gold for comments.

fn demonstrate_bark_texture() {
    "Everything is found material"
        .harvest()
        .refine()
        .build()
}

// This approach: no preprocessor, pure CSS
// Keywords: #6B7F5A (moss)
// Strings: #8B6B4A (bark)
// Comments: #A0936B (lichen)

Each field journal entry fades in from the left (matching the F-pattern reading direction). The animation is triggered by IntersectionObserver when the entry reaches the viewport. Content translates from translateX(-20px) with zero opacity to its resting position with full opacity over 500ms.

The right-margin decorations (watercolor blobs, stars, annotations) scroll at 80% of page scroll rate, creating subtle parallax depth. This is achieved via JavaScript updating a custom property --scroll-y per frame, then applying transform: translateY(calc(var(--scroll-y) * -0.02)).

// Section entrance
transform: translateX(-20px); opacity: 0
  → translateX(0); opacity: 1
duration: 500ms, easing: ease-out
triggered at: threshold 0.15

// Parallax depth
--scroll-y: updated per frame
transform: translateY(calc(var(--scroll-y) * -0.02))

The hero section displays a simulated terminal prompt that types itself out character by character at 60ms intervals. A blinking cursor (a single-character border-right) follows the text, using a 1-second opacity keyframe animation. This creates the illusion that the site itself is being assembled as you watch.

const typewriter = function(text) {
    let index = 0;
    const interval = setInterval(() => {
        if (index < text.length) {
            output.textContent += text[index++];
        } else {
            clearInterval(interval);
        }
    }, 60);
};

The prompt text reads: "building from found materials..." — a mission statement for the entire aesthetic. By the time the page has loaded, the site has already announced its purpose.

prototype.rs represents a philosophy: that technology need not be sterile, that code can coexist with moss, that a development tutorial can feel like a field journal written in a potting shed. The goblincore aesthetic celebrates imperfection, found objects, and the chaotic beauty of natural systems.

This is what happens when you refuse the corporate aesthetic, when you reject the centered layout and photography-driven approach, when you sit down at a wooden workbench surrounded by lichens and terracotta and decide to build something that feels genuinely alive.

// prototype.rs is one of a kind
// It exists at 1% frequency in this collection
// Goblincore, F-pattern layout
// Nature-themed code syntax
// Field journal entry structure
// Phase-offset star animations
// Built without frameworks
// Performance: Core Web Vitals optimized
// Accessibility: WCAG 2.1 AA compliant

mod goblincore {
    fn celebrate() {
        moss::grow();
        decay::embrace();
        found_objects::treasure();
    }
}