Next.jsReact启动器

feral-sky-free-template — Next.js 启动器模板

作者 Northstrix

一个面向自然栖息地探险主题的免费网站模板，包含英雄区、探险项目、向导、用户评价、FAQ、关于我们和页脚等页面区块，并集成了多种动画与交互组件。

打开源站下载源码 ZIP

看看你的网站会是什么样

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

2 个预览视图
桌面端首页1 / 2
桌面端截图首屏预览

从已核对的演示页面实际渲染并截图。

全部页面与视图 2

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

采集于 2026-10-18查看来源

值得关注的模板亮点

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

01

包含英雄区、探险项目、向导、用户评价、FAQ、关于我们和页脚等页面区块

02

集成 Aceternity UI 的可调整导航栏与动画用户评价组件

03

使用 GSAP 与 framer-motion 实现动画效果

04

包含 RTL 旅行卡片示例

05

引用多个 CodePen 交互组件，如轮盘选择器、自定义复选框和浮动标签输入框

06

使用 Lucide React 图标库

模板详细介绍

该模板来自 Northstrix 的 feral-sky-free-template 仓库，README 将其描述为“免费的自然栖息地探险网站模板”。README 列出了英雄区、探险项目、RTL 旅行卡片、向导、用户评价、FAQ、关于我们和页脚等截图，说明模板围绕自然探险主题组织这些页面区块。模板使用了多个第三方组件与库，包括 Aceternity UI 的可调整导航栏和动画评价、GSAP、framer-motion、Lucide React、@ncdai/react-wheel-picker 等，并引用了多个 CodePen 交互效果。README 未提供安装、构建、部署或配置的具体步骤，也未说明响应式行为、浏览器兼容性或生产就绪程度。

Next.js启动器

适合你的项目吗？

适用场景

  • 为自然探险或户外旅行主题网站搭建前端页面结构
  • 参考模板中的区块组织方式与动画组件用法
  • 作为学习 GSAP、framer-motion 及第三方 UI 组件集成的示例
  • 快速创建包含英雄区、项目展示、用户评价和 FAQ 的静态展示页

适合人群

  • 自然探险或户外旅行相关的网站项目
  • 需要现成页面区块与动画效果的前端开发者
  • 希望参考第三方组件集成方式的学习者

上手与定制指南

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

  1. 1

    README 未提供安装依赖、启动开发服务器或构建产物的具体命令

  2. 2

    README 未说明环境要求、配置文件或部署步骤

  3. 3

    模板引用的第三方组件与库需根据 README 中的链接自行查阅其文档

查看仓库使用说明

授权与来源资料

使用条件与限制

免费使用 · 保留许可声明

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

使用时需要遵守

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

额外费用与待核对事项

  • 演示图片、字体、图标及其他第三方素材需按各自许可核对，不能仅凭代码的 MIT 许可判断。
  • 域名、托管、数据库、支付或 AI 等外部服务可能另外收费。
  • 导航栏组件来自 Aceternity UI，使用或再分发时需遵守其自身许可与署名要求。
  • Chronicle Button 效果来自 CodePen 作者 Haaguitos，需遵守该 CodePen 的许可条款。
  • Wheel Picker 组件来自 21st.dev 作者 Chánh Đại，需遵守其组件许可。
  • @ncdai/react-wheel-picker 为第三方 npm 包，需遵守其自身许可。
  • 玻璃质感个人资料卡效果来自 CodePen 作者 あしざわ，需遵守其 CodePen 许可。
  • GSAP 为第三方库，其许可（含商业使用条件）需单独核实，不随本项目 MIT 许可授予。
  • framer-motion 为第三方库，需遵守其自身许可。
  • Lucide React 为第三方图标库，需遵守其自身许可。
  • Agency Layout 布局来自 CodePen 作者 Freask'O，需遵守其 CodePen 许可。
  • 交互表格动画来自 CodePen 作者 Filip Zrnzevic，需遵守其 CodePen 许可。
  • 动画用户评价组件来自 Aceternity UI，需遵守其许可与署名要求。
  • 自定义复选框组件来自 21st.dev 作者 Edil Ozi，需遵守其组件许可。
  • 按钮交互效果来自 CodePen 作者 あしざわ，需遵守其 CodePen 许可。
  • 浮动标签输入动画来自 CodePen 作者 Elpeeda，需遵守其 CodePen 许可。
  • 模板使用的照片来自 Unsplash 等图库，需自行核实各图片的许可与署名要求，项目 MIT 许可不涵盖这些素材。
查看原文依据

Permission is hereby granted, free of charge

许可证原文

[Resizable Navbar](https://ui.aceternity.com/components/resizable-navbar) by [Aceternity UI](https://ui.aceternity.com/)

README 原文

[Chronicle Button](https://codepen.io/Haaguitos/pen/OJrVZdJ) by [Haaguitos](https://codepen.io/Haaguitos)

README 原文

[Wheel Picker](https://21st.dev/ncdai/wheel-picker/default) by [Chánh Đại](https://21st.dev/ncdai)

README 原文

[React Wheel Picker](https://www.npmjs.com/package/@ncdai/react-wheel-picker) by [Chánh Đại](https://github.com/ncdai)

README 原文

[すりガラスなプロフィールカード](https://codepen.io/ash_creator/pen/zYaPZLB) by [あしざわ - Webクリエイター](https://codepen.io/ash_creator)

README 原文

[GSAP (GreenSock Animation Platform)](https://www.npmjs.com/package/gsap)

README 原文

[framer-motion](https://www.npmjs.com/package/framer-motion)

README 原文

[Lucide React](https://www.npmjs.com/package/lucide-react)

README 原文

[Agency Layout - cpc-landing-page](https://codepen.io/fchaussin/pen/PwbPEVV) by [Freask'O](https://codepen.io/fchaussin)

README 原文

[gsap/component ❍ Interactive Table with Image Hover & Idle Animation](https://codepen.io/filipz/pen/EaVNXmb) by [Filip Zrnzevic](https://codepen.io/filipz)

README 原文

[Animated Testimonials](https://ui.aceternity.com/components/animated-testimonials) by [Aceternity UI](https://ui.aceternity.com/)

README 原文

[Custom Checkbox](https://21st.dev/Edil-ozi/custom-checkbox/default) by [Edil Ozi](https://21st.dev/Edil-ozi)

README 原文

[チェックしないと押せないボタン](https://codepen.io/ash_creator/pen/JjZReNm) by [あしざわ - Webクリエイター](https://codepen.io/ash_creator)

README 原文

[Input Floating Label animation](https://codepen.io/Mahe76/pen/qBQgXyK) by [Elpeeda](https://codepen.io/Mahe76)

README 原文

Photo by [Emily Karakis](https://unsplash.com/@iemyoung?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/photos/trees-near-body-of-water-during-daytime-HlJSzoWNhPY?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)

README 原文
https://github.com/Northstrix/feral-sky-free-template/blob/main/LICENSEhttps://github.com/Northstrix/feral-sky-free-template/blob/main/README.md

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

项目核对记录与介绍依据

模板资料

来源平台
GitHub
资料与维护参考分
资料较完整 · 80 / 100
技术栈
Next.js · React
网站类型
启动器
这个分数如何计算

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

这个项目需要核对什么

记录的仓库更新时间
2026-05-24
截图检查日期
2026-10-18

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

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

查看具体选型方法 →

介绍的制作与核对状态

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

审核声明: codex-user-requested-batch-review-20261018 · 2026-10-18

查看当时使用的来源资料

SHA-256: a86dbb6dbb8fbb40dc83f805d191a234dd55fc5a8e30a08695ecf9f9f7f980bf

2026-10-14T20:25:47.262Z

来源文件 / 仓库
# Feral Sky Free Template
A free natural habitat adventures website template.

SourceForge page: https://sourceforge.net/projects/feral-sky-free-template/

Link: https://feral-sky-free-template.netlify.app/

![Alt Hero Section](https://github.com/Northstrix/feral-sky-free-template/blob/main/screenshots/hero.webp?raw=true)

![Alt Expeditions Section](https://github.com/Northstrix/feral-sky-free-template/blob/main/screenshots/expeditions.webp?raw=true)

![Alt RTL Tour Card](https://github.com/Northstrix/feral-sky-free-template/blob/main/screenshots/rtl-tour-card.webp?raw=true)

![Alt Guides Section](https://github.com/Northstrix/feral-sky-free-template/blob/main/screenshots/guides.webp?raw=true)

![Alt Testimonials Section](https://github.com/Northstrix/feral-sky-free-template/blob/main/screenshots/testimonials.webp?raw=true)

![Alt FAQ Section](https://github.com/Northstrix/feral-sky-free-template/blob/main/screenshots/faq.webp?raw=true)

![Alt About Us Section](https://github.com/Northstrix/feral-sky-free-template/blob/main/screenshots/about-us.webp?raw=true)

![Alt Footer](https://github.com/Northstrix/feral-sky-free-template/blob/main/screenshots/footer.webp?raw=true)

## Credit
[Resizable Navbar](https://ui.aceternity.com/components/resizable-navbar) by [Aceternity UI](https://ui.aceternity.com/)

[Chronicle Button](https://codepen.io/Haaguitos/pen/OJrVZdJ) by [Haaguitos](https://codepen.io/Haaguitos)

[Wheel Picker](https://21st.dev/ncdai/wheel-picker/default) by [Chánh Đại](https://21st.dev/ncdai)

[React Wheel Picker](https://www.npmjs.com/package/@ncdai/react-wheel-picker) by [Chánh Đại](https://github.com/ncdai)

[すりガラスなプロフィールカード](https://codepen.io/ash_creator/pen/zYaPZLB) by [あしざわ - Webクリエイター](https://codepen.io/ash_creator)

[GSAP (GreenSock Animation Platform)](https://www.npmjs.com/package/gsap)

[framer-motion](https://www.npmjs.com/package/framer-motion)

[Lucide React](https://www.npmjs.com/package/lucide-react)

[Agency Layout - cpc-landing-page](https://codepen.io/fchaussin/pen/PwbPEVV) by [Freask'O](https://codepen.io/fchaussin)

[gsap/component ❍ Interactive Table with Image Hover & Idle Animation](https://codepen.io/filipz/pen/EaVNXmb) by [Filip Zrnzevic](https://codepen.io/filipz)

[Animated Testimonials](https://ui.aceternity.com/components/animated-testimonials) by [Aceternity UI](https://ui.aceternity.com/)

[Custom Checkbox](https://21st.dev/Edil-ozi/custom-checkbox/default) by [Edil Ozi](https://21st.dev/Edil-ozi)

[チェックしないと押せないボタン](https://codepen.io/ash_creator/pen/JjZReNm) by [あしざわ - Webクリエイター](https://codepen.io/ash_creator)

[Input Floating Label animation](https://codepen.io/Mahe76/pen/qBQgXyK) by [Elpeeda](https://codepen.io/Mahe76)

[Landing page with swiper #css #swiper.js](https://codepen.io/kristen17/pen/GRXgqaB) by [Kristen](https://codepen.io/kristen17)

[Inverted border-radius using CSS mask II](https://codepen.io/t_afif/pen/LEPBYvK) by [Temani Afif](https://codepen.io/t_afif)

[shimmer accordion 💫](https://codepen.io/jh3y/pen/gbLOajZ) by [Jhey](https://codepen.io/jh3y)

[Multi Colored Text with CSS](https://codepen.io/TajShireen/pen/YzZmbep) by [Shireen Taj](https://codepen.io/TajShireen)

[JTB studios - Link](https://codepen.io/zzznicob/pen/GRPgKLM) by [Nico](https://codepen.io/zzznicob)

[Hover Link Animation](https://21st.dev/community/components/rubenerik/hover-link-animation/default) by [Ruben](https://21st.dev/rubenerik)

Photo by [Emily Karakis](https://unsplash.com/@iemyoung?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/photos/trees-near-body-of-water-during-daytime-HlJSzoWNhPY?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)

Photo by [Matt Artz](https://unsplash.com/@mattartz?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/photos/pine-trees-nTRDnDdDYk8?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)

Photo by [Griffin Wooldridge](https://unsplash.com/@dzngriffin?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/photos/green-trees-on-green-grass-field-during-daytime-AlfcpJS7OLw?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)

Photo by [Philipp](https://unsplash.com/@picture_scape?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/photos/a-lake-surrounded-by-mountains-4hZPYyaXOH4?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)

Photo by [Cristina Gottardi](https://unsplash.com/@cristina_gottardi?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/photos/birds-eye-view-photography-of-mountain-range-Of1jWtdnQCY?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)

Photo by [Kendall Wooldridge](https://unsplash.com/@kenwoo19?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/photos/green-trees-beside-river-during-daytime-IxFF1c2vELM?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)

Photo by [Spencer DeMera](https://unsplash.com/@spencer_demera?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/photos/a-river-flows-between-lush-green-mountains-Xk5scnUMV9w?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)

Photo by [Marek Piwnicki](https://unsplash.com/@marekpiwnicki?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/photos/a-lush-green-hillside-covered-in-lots-of-trees-OXKmcihJgEE?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)

Photo by [Stefan Kostić](https://unsplash.com/@thestefankostic?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/photos/green-trees-under-blue-sky-and-white-clouds-during-daytime-Eptb7X_NUvU?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)

Photo by [Vitaly Gorbachev](https://www.pexels.com/@vitalyagorbachev/) from [Pexels](https://www.pexels.com/photo/low-angle-shot-of-woman-wearing-jacket-15587225/)

Photo by [Matthew Lockhart](https://unsplash.com/@lockhart82?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/photos/man-standing-near-leafless-tree-6mMdq3ZRAhc?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)

Photo by [Reginaldo Lustosa](https://www.pexels.com/@r3gin4ldo/) from [Pexels](https://www.pexels.com/photo/photograph-of-a-woman-in-a-pink-off-shoulder-dress-smiling-7700533/)

Photo by [Gift Habeshaw](https://unsplash.com/@gift_habeshaw?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/photos/man-standing-between-rice-paddy-during-daytime-zgayb8anYJ4?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)

Photo by [Tnarg](https://www.pexels.com/@tnarg/) from [Pexels](https://www.pexels.com/photo/redhead-woman-posing-with-hand-in-hair-5131658/)

Photo by [Jonas Svidras](https://www.pexels.com/@jonas-svidras/) from [Pexels](https://www.pexels.com/photo/woman-wearing-black-spaghetti-strap-top-555787/)

Photo by [DAVID NIETO](https://unsplash.com/@nietramos_d?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/photos/man-in-black-jacket-standing-in-forest-during-daytime-lqHp2DGg_ZA?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
反馈内容错误

看看同类模板

对比同技术栈与用途的模板，找到更适合的视觉与内容结构。

ai-website-cloner-template

ai-website-cloner-template

Clone any website with one command using AI coding agents

Next.js · 启动器

Next.js SaaS Starter

Next.js SaaS Starter

Next.js SaaS Starter 是 Next.js 官方维护的 SaaS 起点模板，定位介于学习资源和可直接部署的脚手架之间。

Next.js · SaaS

Next.js Commerce

Next.js Commerce

Next.js Commerce 是 Vercel 团队维护的电商启动模板，基于 Next.js App Router 构建，采用服务端渲染、React Server Components、Server Actions …

Next.js · 电商

Next-js-Boilerplate

Next-js-Boilerplate

Next-js-Boilerplate 是一个面向 Next.js 16、Tailwind CSS 4 和 TypeScript 的启动器，核心定位是开发者体验优先。

Next.js · 启动器

tailwind-nextjs-starter-blog

tailwind-nextjs-starter-blog

tailwind-nextjs-starter-blog 是一个面向个人技术博客的 Next.js 与 Tailwind CSS 启动模板，其 v2 版本基于 App Router 与 React Server Comp…

Next.js · 博客

next-forge

next-forge

Production-grade Turborepo template for Next.js apps.

Next.js · 启动器