Introduction
- Document version: 1.0.0
- Created: 20 October 2026
- Last update: 21 October 2026
Overview
Rasuke is a premium Next.js template for creative agencies and digital studios. It ships as an App Router project with SCSS design tokens, React section components, and client-side motion powered by GSAP 3.15 and Three.js 0.184 — ported from the Rasuke HTML master so the BEM classes, tokens, and layouts stay aligned across all Rasuke packages.
We have a dedicated Support Center for all of your support needs. It includes our Documentation and Ticket system for any questions you have. We usually get back to you within 12–24 hours.
Buy once and receive lifetime updates as the product evolves.
Stack highlights
- Next.js 16.3.6 App Router with React 19.2.8 and TypeScript
- Static export —
output: "export"writes the production site toout/(Cloudflare Pages ready) - SCSS token system — edit
tokens/tokens.json, runnpm run tokens - GSAP 3.15 — ScrollTrigger, ScrollSmoother, ScrollToPlugin (Club plugins: SplitText; ScrollSmoother is a Club plugin)
- Three.js 0.184 — grid / hover image deformation and the Showcase 2 WebGL carousel
- GLightbox 3 lightbox and a GSAP digit counter (no Odometer, no jQuery in the product)
- Google Fonts — Host Grotesk, DM Sans, Bonheur Royale loaded from the root layout
- JSON-driven copy in
src/dataand reusable section components - 25 demo pages — 3 homepages, project listings and showcases, studio pages, blog, pricing, contact, terms — plus a custom 404 route
Motion (client-only)
All GSAP / Three.js motion boots on the client through EffectsLoader — a dynamic import of EffectsBootstrap with ssr: false. The bootstrap re-runs on every route change (keyed on usePathname()), creates ScrollSmoother, and tears everything down on unmount. Server Components stay free of animation side effects.
Design tokens
Colors, type steps, spacing, radii, motion timings, and per-section geometry all come from tokens/tokens.json (synced from the Figma file Rasuke agency_v1, Variable collection with Light + Dark modes). The build script compiles that file into SCSS maps, which are emitted as CSS custom properties.
Browser support
- Latest Chrome, Firefox, Safari, and Edge (desktop)
- Current iOS Safari and Android Chrome
- Not intended for Internet Explorer or legacy Edge
- WebGL sections and ScrollSmoother degrade gracefully when unsupported or when
prefers-reduced-motion: reduceis set
GSAP Club note
ScrollSmoother and SplitText are GSAP Club plugins. A valid Club license is required for production use. See gsap.com/pricing. Full third-party credits live in the package CREDITS.md.
What's included
rasuke-nextjs-dev— Next.js template source (App Router, React 19, TypeScript, SCSS)- Documentation kit — this offline HTML site
- Figma design file Rasuke agency_v1 — design source for tokens and text styles
- Commercial license — see the package
LICENSE.md
Demo pages
| Group | Route | Sections / notes |
|---|---|---|
| Homepages | / | Hero1, About1, Projects1, Services1, Testimonials1, Team1, WhyUs1, Blog1 — header-1 / footer-1, preloader on |
/index-2 | Hero2, Projects2, Testimonials2, Img1, Services2 — header-2 / footer-2, preloader on | |
/index-3 | Hero3, Projects3, Brands1, Fact1, Services4, Faqs3, Blog2 — header-4 / footer-3, preloader on | |
| Projects | /project-listing-1 … /project-listing-5 | Five listing layouts (title + grid/list sections) |
/project-showcase-1 … /project-showcase-6 | Fullscreen showcase layouts — header-3; footer hidden on showcases 1–4 | |
/project-details | PageTitle4 + ProjectDetails1 | |
| Studio | /about | About2, Team2, Number1, Awards1 |
/services, /service-details | Services3 + Faqs1 / ServiceDetail1–3 | |
/team, /team-details | PageTitle5 + Team3 + Cta1 / PageTitle4 + TeamDetails1–2 | |
| Content | /blog, /blog-details | PageTitle6 + BlogPosts / BlogDetails |
/pricing | PageTitle1 + Pricing + Faqs2 | |
/contact | Contact | |
/terms | PageTitle1 + TermsContent | |
| Utility | not-found.tsx | 404 layout (blank chrome, no preloader) |
Technical requirements
- Node.js 18.18+ or 20+ (see
enginesinpackage.json) - npm (comes with Node)
- Basic familiarity with React and the Next.js App Router
Note
- This is a Next.js template, not a WordPress theme.
- The documentation site you are reading uses its own isolated stylesheet. The Rasuke product itself uses no Bootstrap, Tailwind, or other CSS framework.
- All demo pages are pinned to the
darkcolor scheme — see Dark Mode. - BDO Grotesk is a licensed typeface and is not redistributed; the token stacks fall back to Host Grotesk until you add your licensed files.
Change log
VERSION 1.0.0 — 2026-10-20 - Initial release: Next.js 16 App Router port from the Rasuke HTML master - React 19, TypeScript, SCSS token system, GSAP 3.15, Three.js 0.184, GLightbox 3 - 25 demo pages, static export (output: "export") for Cloudflare Pages