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 to out/ (Cloudflare Pages ready)
  • SCSS token system — edit tokens/tokens.json, run npm 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/data and 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: reduce is 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
GroupRouteSections / notes
Homepages/Hero1, About1, Projects1, Services1, Testimonials1, Team1, WhyUs1, Blog1 — header-1 / footer-1, preloader on
/index-2Hero2, Projects2, Testimonials2, Img1, Services2 — header-2 / footer-2, preloader on
/index-3Hero3, Projects3, Brands1, Fact1, Services4, Faqs3, Blog2 — header-4 / footer-3, preloader on
Projects/project-listing-1 … /project-listing-5Five listing layouts (title + grid/list sections)
/project-showcase-1 … /project-showcase-6Fullscreen showcase layouts — header-3; footer hidden on showcases 1–4
/project-detailsPageTitle4 + ProjectDetails1
Studio/aboutAbout2, Team2, Number1, Awards1
/services, /service-detailsServices3 + Faqs1 / ServiceDetail1–3
/team, /team-detailsPageTitle5 + Team3 + Cta1 / PageTitle4 + TeamDetails1–2
Content/blog, /blog-detailsPageTitle6 + BlogPosts / BlogDetails
/pricingPageTitle1 + Pricing + Faqs2
/contactContact
/termsPageTitle1 + TermsContent
Utilitynot-found.tsx404 layout (blank chrome, no preloader)
Technical requirements
  • Node.js 18.18+ or 20+ (see engines in package.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 dark color 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