COMPONENTS / v0.1.2

熟悉的温度，
新一层光。

窗后是若隐若现的笔记，纸上是写到一半的推导，旁边留着一段对话。试试这些新零件：暖纸、墨色与莓红都还在，细节多了一点。

毛玻璃轻量动效祖传图标丰富消息代码高亮 Markdown 与 TeX 富文本编辑器

01 / Behind the glass

隔着毛玻璃，仍看得见灵感。

v0.1.2

同一幅风景，隔着一层温柔的雾。

是窗，不是墙

把世界，轻轻透进来。

文字隐去锋芒，色彩漫过边缘。眼前的心事，依然清晰。

玻璃后方是真实文字与 SVG 画布；减少透明度模式或不支持的浏览器使用实色表面。

文字与曲线真实铺在面板下方，不是背景贴图。关掉雾面，对比遮盖前后的轮廓；不支持背景模糊或偏好降低透明度时，回退为可读的实色表面。

02 / A considered entrance

轻轻出现，不喧宾夺主。

fade

rise

scale

入场一次，随后静止。重播由你决定；始终尊重减少动态效果偏好。

03 / Familiar signatures

祖传星芒，正式入库。

brand

原版珊瑚 K 与星芒，保留 SVG 原始几何。

sparkle

同一颗星芒，随上下文继承颜色。

Native SVG

默认作为装饰。图标承载含义时提供 title；纯图标按钮需有可访问名称。

04 / Everyday essentials

Button · Badge · Notice

React island

DefaultNewStable服务在线

底色与基础，一如既往

原生语义、可组合属性，以及可以独立引入的样式层。

05 / A conversation with texture

MessageBubble · Composer

自由组合，不预设业务

一个新想法，从这里开始。这是仅在本地运行的对话演示。

Klee

做一个温暖、安静，但不失技术感的首页吧。

设计基础风格参考 · 打开文档

Moe

Klee
温暖、安静，但不失技术感。

保留暖纸与莓红，添一张透光便笺、几处克制的动效，再让代码在明暗两种主题下都好读。

输入状态指示器示例

06 / Code, in its best light

为每一行，找到好光线。

代码高亮、适合阅读的等宽字体与明暗独立配色。试试右上角切换主题；长行留在代码框内滚动，不挤压页面。

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>
  );
}

支持键盘聚焦滚动与复制。未知语言仍按纯文本安全显示，不把代码当作 HTML 执行。

07 / Notes, proofs, and little discoveries

文字与公式，共用一张好纸。

Markdown 整理层次，TeX 安放公式。这一页由 Astro 在服务端完成排版，浏览器无需等待客户端渲染。

工作台上的一页随记

一张便笺，可以放下一个想法、几行代码，也可以认真写完一段推导。行内公式 $e^{i\pi}+1=0$ 就留在句子里，不必另起一页。

给下一句话留一点空白。初稿不必急着成为定稿。

留住暖纸与莓红
让公式和文字坐在一起
写下下一页

材料	适合放在哪里
Markdown	笔记、链接与待办清单
TeX	推导过程与数学想法

一个有限求和，留出足够的阅读空间：

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

想带回自己的项目，可以翻开接入指南。

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

推导再长，也不把纸面撑开。

独立 TeX 组件在窄屏内横向滚动，长公式留在自己的区域，正文照常阅读。

\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（GitHub Flavored Markdown）表格、任务列表，以及行内与块级公式。默认不解析原始 HTML：内容负责表达，不负责执行脚本。

08 / A page of your own

下一行，轮到你来写。

给想法起个标题，把重点轻轻加粗，再放进几行代码。编辑器交回的是 Markdown：可以带走的纯文本，而不是锁在工具里的一页纸。

用示例替换当前草稿：

只读禁用

趁想法还温热

给下一句话，留一点空白。

记下一个小小的发现
用自己的话再说一遍

const note = 'keep exploring';

公式与暂不支持的语法保留在源码模式，避免转换时丢失含义；切换预览即可阅读渲染结果。这里只是本地试写：刷新后修改会消失，没有自动保存或后台同步。

01 / 可以带走的 Markdown

## 趁想法还温热

给下一句话，留**一点空白**。

- 记下一个小小的发现
- 用自己的话再说一遍

```ts
const note = 'keep exploring';
```

02 / 同一段文字，落在纸上

趁想法还温热

给下一句话，留一点空白。

记下一个小小的发现
用自己的话再说一遍

const note = 'keep exploring';