Neon.开源 | SSS™

1. 现代化动效与原生架构

在这个充斥着沉重 JS 框架（如 React/Vue）的时代，SSS 架构 选择了一条硬核的逆向道路。核心理念在于“无缝体验”与“原生渲染”。

摒弃了重度依赖的第三方动画库，完全基于原生 Web API（如 Canvas 引擎、Intersection Observer）构建。这赋予了它极高的加载速度与丝滑的高帧交互体验。

Vanilla HTML5 & JS

纯粹的原生代码编写，告别庞大的 node_modules，确保了完美的加载速度与完全的底层掌控力。

Seamless Transition

自研的全局幕布转场引擎。拦截默认的生硬跳转，实现跨页面的无缝顺滑过渡（SPA 级体验）。

Canvas Particle Engine

首页集成的轻量级粒子网状连线物理引擎，与鼠标实时交互，渲染成本极低。

CSS Variables Theme

通过 :root 统一定义霓虹色系，辅以环境光晕（Ambient Glow），营造强烈的赛博与科技美学。

"Design is the silent ambassador of your brand. 冰冷的逻辑与华丽的视觉，在这里达成微妙的平衡。"

2. 设计规范与色彩系统

移除了旧版发黄的复古纸张色，重构为通透的“冰层蓝”基调，配合高饱和度的“青色”与“深蓝”作为点缀。卡片融入了轻微的毛玻璃质感与呼吸悬浮阴影。

Ice Base

var(--bg-base)

Pure Surface

var(--bg-surface)

Neon Cyan

var(--accent-cyan)

Tech Blue

var(--accent-blue)

3. Typography 排版与语义化演示

Neon 框架高度依赖原生 HTML 语义化标签。下面展示了在文章、博客或说明文档中，不同文本状态在全新设计语言下的渲染效果：

这是一段标准的正文文本。在数字媒体的浪潮中，我们需要更加坚定的内核 (Bold)。偶尔，我们也会陷入形而上学的思考 (Italic)。

对于重点内容，提供优雅的带有主题青色偏移的下划线 (Underline)。当我们推翻过去的结论时，可以使用 ~~优雅的删除线 (Strikethrough)~~。

如果你想引起访客的绝对注意，请使用霓虹高亮标记 (Highlight)。而在撰写技术文档时，行内代码如 console.log('Hello Neon') 会自动获得蓝色的等宽字体强调。

4. 页面版式架构 (Layouts)

本站点由三种核心版式构成，通过极简的 CSS Grid 布局驱动：

模式 A：网格画廊模式 (Grid Exhibition)

应用于 index.html 和 works.html。无限堆叠内容块，悬浮时带有发光阴影与位移。

Card 1

Card 2

Card 3

模式 B：双栏粘性模式 (Sticky Sidebar)

应用于 about.html。左侧名片区固定吸顶，右侧内容流动，适合档案或长文档阅读。

名片区 (Sticky)

内容流区块

随着页面滚动

模式 C：居中文档模式 (Centered Doc)

即当前页面的版式。收缩最大宽度，专注于文字阅读，两侧留白让呼吸感更强。

居中文档流

5. 源码

由于脱离了复杂的构建工具，扩展与复用 Neon 极其简单。以下是构成全局无缝转场和霓虹配色的最小化原生代码模板。

Neon-Boilerplate.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Neon Starter</title>
    <style>
        /* 1. 霓虹变量 */
        :root {
            --bg-base: #f7fbff;
            --bg-surface: #ffffff;
            --text-main: #1d2c36;
            --accent-cyan: #00cec9;
        }
        body { background: var(--bg-base); color: var(--text-main); font-family: sans-serif; }
        
        /* 2. 幕布转场 CSS */
        .page-curtain {
            position: fixed; top: 0; left: 0; width: 100%; height: 100vh;
            background: var(--bg-surface); z-index: 9999;
            display: flex; justify-content: center; align-items: center;
            transition: transform 0.85s cubic-bezier(0.77, 0, 0.175, 1);
            transform: translateY(0);
        }
        .page-curtain.is-revealed { transform: translateY(-100%); pointer-events: none; }
    </style>
</head>
<body>
    <!-- 幕布结构 -->
    <div class="page-curtain" id="pageCurtain"><h1>Loading...</h1></div>

    <h1>Hello Neon Engine.</h1>
    <a href="next.html">点击体验无缝跳转</a>

    <script>
        // 3. 转场拦截逻辑
        document.addEventListener("DOMContentLoaded", () => {
            const curtain = document.getElementById('pageCurtain');
            // 进场拉开
            setTimeout(() => curtain.classList.add('is-revealed'), 50);
            
            // 离场拦截
            document.querySelectorAll('a').forEach(a => {
                a.addEventListener('click', function(e) {
                    if (this.hostname === window.location.hostname && !this.target) {
                        e.preventDefault();
                        curtain.style.transition = 'none';
                        curtain.style.transform = 'translateY(100%)';
                        curtain.classList.remove('is-revealed');
                        void curtain.offsetWidth;
                        curtain.style.transition = 'transform 0.6s cubic-bezier(0.77, 0, 0.175, 1)';
                        curtain.style.transform = 'translateY(0)';
                        setTimeout(() => window.location.href = this.href, 600);
                    }
                });
            });
        });
    </script>
</body>
</html>