Moe SegfaultMoeSegFaultStyle workshop
中文

COMPONENTS / v0.1.2

Same warmth.
A new light.

A frosted pane over your notes, a sparkle beside a reply, a proof that fits the page. Try the pieces below; the paper, ink, and berry stay familiar.

Frosted glassMotionOriginal iconsMessagesCode highlightingMarkdown & TeXRich-text editor

01 / Behind the glass

A softer view of what lies beneath.

v0.1.2

Same scene. A different view through the glass.

A WINDOW, NOT A WALL

Let the world show through.

The letters soften. The colors wander. What matters stays in focus.

Live text + SVG behind the pane. Reduced transparency and unsupported browsers use a solid surface.

The text and curves sit behind the panel, not inside a background image. Switch off the frost to compare. Without blur support, or when reduced transparency is preferred, the surface stays readable.

02 / A considered entrance

Movement, not distraction.

fade
rise
scale

One entrance, then stillness. Replay is optional; reduced-motion preferences take priority.

03 / Familiar signatures

The original, now reusable.

MoeSegfault

brand

The original coral K and sparkle, preserved as SVG geometry.

sparkle

The same sparkle, inheriting the color of its surroundings.

Native SVG

Decorative by default. Add a title when the icon carries meaning; label icon-only buttons.

04 / Everyday essentials

Button · Badge · Notice

React island
DefaultNewStableService online
Still the same foundations
Native semantics, composable props, and layers you can import independently.

05 / A conversation with texture

MessageBubble · Composer

Composable, not prescriptive
A new idea starts here. This conversation is a local demo.
Moe
Klee
Warm, quiet, and technical.

Keep the paper and berry palette. Add a translucent note, thoughtful motion, and code that reads beautifully in either theme.

Just now
Typing indicator specimen

06 / Code, in its best light

A better light for every line.

Syntax highlighting, a reading-friendly monospace font, and separate light and dark palettes. Try the theme switch above. Long lines scroll inside the frame, not across the page.

React · composition.tsxtsx
import { GlassCard, Icon, MessageBubble } from "@moesegfault/style/react";
import "@moesegfault/style/all.css";

export function Workshop() {
  return (
    <GlassCard tone="warm">
      <Icon name="sparkle" size={24} />
      <MessageBubble author="Moe" tone="soft">
        A little light, a little less noise.
      </MessageBubble>
    </GlassCard>
  );
}

Keyboard-focusable scrolling and copy controls. Unknown languages remain safe plain text; source code is not executed as HTML.

07 / Notes, proofs, and little discoveries

A page for words and equations.

Markdown handles the structure; TeX sets the mathematics. This note is rendered by Astro before it reaches your browser—no client-side rendering step is needed.

A small note from the workbench

A useful note can hold an idea, a little code, and a proof. Inline math such as eiπ+1=0e^{i\pi}+1=0 stays in the sentence.

Leave room for the next thought. A first draft does not need to be a final answer.

  • Keep the paper and berry palette
  • Set equations beside the words
  • Write the next page
Material A place for it
Markdown Notes, links, and checklists
TeX Derivations and mathematical ideas

A finite sum, with enough space to read:

∑k=1nk=n(n+1)2\sum_{k=1}^{n} k = \frac{n(n+1)}{2}

Read the integration guide when you are ready to take it home.

const draft = { theme: "warm-paper", ready: true };

A long derivation stays on its own line.

This standalone TeX specimen scrolls horizontally on narrow screens. The rest of the page stays put.

1+2+3+⋯+n⏟ascending+n+(n−1)+(n−2)+⋯+1⏟descending=(n+1)+(n+1)+⋯+(n+1)⏟n pairs=n(n+1)\underbrace{1 + 2 + 3 + \cdots + n}_{\text{ascending}} + \underbrace{n + (n-1) + (n-2) + \cdots + 1}_{\text{descending}} = \underbrace{(n+1) + (n+1) + \cdots + (n+1)}_{n\text{ pairs}} = n(n+1)

GFM tables and task lists, inline and display math. Raw HTML is disabled by default; Markdown is content, not a place to run scripts.