Astro企业官网

astro-theme-northlight — Astro 企业官网模板

作者 Sv3nskie

面向代理机构、咨询公司与工作室的单页 Astro 主题，以滚动驱动的电影感叙事为核心，使用纯 CSS 与单个原生 JS 文件实现。

打开源站下载源码 ZIP

看看你的网站会是什么样

浏览真实页面截图，比较内容排版与手机效果。点击下方缩略图切换，放大查看整页细节。

2 个预览视图

桌面端首页1 / 2

访问演示网站在新标签页打开

桌面端截图首屏预览

由服务器浏览器实际访问页面后截取。

全部页面与视图 2

截图用于了解视觉与布局，交互效果请以实际项目为准。

采集于 2026-09-30查看来源

值得关注的模板亮点

从已有项目资料中，快速了解它的特点。

滚动驱动的章节编排：固定服务卡片堆叠、横向陈述、客户故事、逐词点亮、视差与 3D 图版堆叠，向上滚动时反向回放

首次访问显示开场幕布，每个会话仅一次，可用 ?intro 参数重播

自定义光标、磁吸按钮、logo 跑马灯与数字计数动画

响应式布局，移动端全屏菜单，固定定位使用 svh 单位避免浏览器工具栏遮挡

尊重 prefers-reduced-motion，提供跳转链接与语义化地标

除 Astro 外无其他依赖，使用纯 CSS 与单个原生 JS 文件

模板详细介绍

Northlight 是一个单页企业官网主题，定位给代理机构、咨询公司和工作室使用。页面内容按章节组织，每个章节对应 src/components 下的一个 .astro 文件，品牌名称、联系方式、SEO 标题与描述、分享图集中在 src/config.ts 配置，颜色、字体和间距令牌放在 src/styles/nocturne.css，布局与动画状态在 src/styles/main.css，滚动和指针行为在 src/scripts/main.js。

交互上以滚动位置为驱动：固定的服务卡片堆叠、横向陈述段落、客户故事、逐词点亮、视差和 3D 图版堆叠等效果会随滚动向上回放；首次访问显示开场幕布（每个会话一次，可通过 ?intro 参数重播）。此外包含自定义光标、磁吸按钮、logo 跑马灯和数字计数动画。移动端提供全屏菜单，并使用 svh 单位做固定定位，避免浏览器工具栏遮挡内容。

可访问性方面尊重 prefers-reduced-motion（开启时所有内容直接呈现最终状态），提供跳转链接和语义化地标。除 Astro 外没有其他依赖。主题使用 Unsplash 占位图片，上线前需替换。构建输出为静态文件，可部署到任意静态托管，仓库自带 GitHub Actions 工作流用于将演示发布到 GitHub Pages。代码采用 MIT 许可，页脚保留“Theme by Sv3n”署名是可选的。

Astro企业官网

适合你的项目吗？

适用场景

代理机构、咨询公司或工作室搭建单页品牌官网
需要以滚动叙事方式展示服务、客户故事与品牌主张的展示型站点
希望用少量配置文件集中管理品牌名、联系方式与 SEO 信息的静态站点
需要部署到 GitHub Pages 或其他静态托管、并自带构建工作流的项目

适合人群

代理机构、咨询公司与设计工作室
偏好单页滚动叙事而非多页结构的品牌站点
使用 Astro 并希望避免引入 UI 框架或动画库的开发者
需要静态输出、可部署到任意静态托管的项目

上手与定制指南

结合仓库当前版本的说明，按下面的资料检查内容、配置与运行要求。

1
通过 npm create astro@latest -- --template Sv3nskie/astro-theme-northlight 创建项目，然后运行 npm run dev
2
在 src/config.ts 中修改品牌名称、联系方式、SEO 标题与描述、分享图；品牌名会自动用于 logo、开场幕布和页脚大字
3
章节文案与图片在 src/components/*.astro 中按文件逐节修改；颜色、字体和间距令牌在 src/styles/nocturne.css，布局与动画状态在 src/styles/main.css，滚动与指针行为在 src/scripts/main.js
4
主题使用 Unsplash 占位图片，上线前需替换为自有素材并核对第三方素材许可
5
运行 npm run build 生成 dist/ 目录，可部署到任意静态托管；仓库自带 GitHub Actions 工作流用于发布演示到 GitHub Pages

查看仓库使用说明

授权与来源资料

使用条件与限制

免费使用 · 保留许可声明

本次收录的是公开仓库中采用 MIT 许可的免费版本；免费范围为该版本代码，不代表外部服务或第三方素材免费。

使用时需要遵守

允许免费使用、修改、商用和分发该版本代码。
分发代码副本或实质性部分时，保留原作者版权声明和完整 MIT 许可声明。
代码按现状提供；担保与责任限制以原许可证及适用法律为准。

额外费用与待核对事项

主题内置的占位图片来自 Unsplash，并非随代码以 MIT 授权提供；上线前需替换为自有素材，并自行核对第三方图片的许可与使用条件。
页脚保留“Theme by Sv3n”署名仅为作者期望，并非 MIT 许可的强制条件，可自行移除。
演示图片、字体、图标及其他第三方素材需按各自许可核对，不能仅凭代码的 MIT 许可判断。
域名、托管、数据库、支付或 AI 等外部服务可能另外收费。

查看原文依据

Permission is hereby granted, free of charge
许可证原文

Placeholder photography is from [Unsplash](https://unsplash.com) — replace it with your own before launch.
README 原文

Keeping the small "Theme by Sv3n" credit in the footer is appreciated but not required.
README 原文

https://github.com/Sv3nskie/astro-theme-northlight/blob/main/LICENSE https://github.com/Sv3nskie/astro-theme-northlight/blob/main/README.md

DeepSeek 根据仓库许可证和 README 整理 ·2026-10-01。结果仅覆盖已读取资料，依赖、图片、字体及后续条款变更以各自原文为准。

项目核对记录与介绍依据

模板资料

来源平台: GitHub
资料与维护参考分: 资料较完整 · 80 / 100
技术栈: Astro
网站类型: 企业官网

这个分数如何计算

本站按许可资料（最高30分）、演示链接（12分）、预览图（10分）、Star数（15分）、记录的维护时间（15分）、描述完整度（8分）、功能记录（5分）和分类资料（5分）计算。它不是代码、安全或性能测试，也不是 Google 评分；有链接不代表已实测可用。

这个项目需要核对什么

记录的仓库更新时间: 2026-09-28
截图检查日期: 2026-10-01

已收录演示链接。请用你的内容与屏幕尺寸检查；有演示不代表表单、认证或支付已经可用。

目录记录的主要技术栈是 Astro。请通过依赖清单和锁文件核对实际版本与托管要求。这些说明基于收录资料，不代表代码审计或部署实测。

查看具体选型方法 →

介绍的制作与核对状态

介绍由 AI 辅助整理目录与仓库资料。仓库作者不等于这篇介绍的审核者。

已完成服务器许可规则与 AI 来源核对；未经过人工编辑审核。

查看当时使用的来源资料

SHA-256: fb364164d026194d0821c5b3fc0a59a2f6070c6528bd46e8acc9ef0465e55eb4

2026-10-01T14:19:22.579Z

来源文件 / 仓库

# Northlight — Astro theme

A cinematic, scroll-driven one-page theme for **agencies, consultancies and studios**. Dark, fast, and built with plain CSS and a single vanilla JS file — no UI framework, no animation library.

**[Live demo →](https://sv3nskie.github.io/astro-theme-northlight/)**

## Features

- **Scroll choreography that rewinds.** Pinned chapters (a stacked services deck, a horizontal statement, client stories), word-by-word lighting, parallax and a 3D plate stack — all driven by scroll position, so everything plays backwards on scroll-up.
- **Intro curtain** on first visit (once per session; add `?intro` to replay).
- **Custom cursor, magnetic buttons, logo marquee, animated counters.**
- **Fully responsive** with a full-screen mobile menu and `svh`-based pinning so mobile browser bars never hide content.
- **Accessible:** respects `prefers-reduced-motion` (everything renders in its final state), skip link, semantic landmarks.
- **Zero dependencies** beyond Astro.

## Getting started

```bash
npm create astro@latest -- --template Sv3nskie/astro-theme-northlight
cd <your-project>
npm run dev
```

## Make it yours

| What | Where |
| --- | --- |
| Brand name, contact details, SEO title/description, share image | `src/config.ts` |
| Section copy and images | `src/components/*.astro` (one file per section) |
| Colors, type and spacing tokens | `src/styles/nocturne.css` |
| Layout and animation states | `src/styles/main.css` |
| Scroll/pointer behaviour | `src/scripts/main.js` |

The brand name drives the logo, the intro curtain and the big footer wordmark automatically.

Placeholder photography is from [Unsplash](https://unsplash.com) — replace it with your own before launch.

## Deploying

Any static host works (`npm run build` → `dist/`). The included GitHub Actions workflow publishes the demo to GitHub Pages.

## Credits

Designed and built by **[Sven Esser](https://sv3n.dev?utm_source=github&utm_medium=theme-readme&utm_campaign=northlight)** — full-stack & Web3 developer. Need a custom site? [Get in touch](https://sv3n.dev/contact?utm_source=github&utm_medium=theme-readme&utm_campaign=northlight).

MIT licensed. Keeping the small "Theme by Sv3n" credit in the footer is appreciated but not required.

反馈内容错误