Norio - Digital Agency & Portfolio NextJS Template

Overview

Norio is a premium Next.js template for creative agencies, design studios, and digital teams that need a high-end portfolio presence with a token-driven React codebase. Ported from the Norio HTML master, it keeps the same BEM layout language and motion craft while shipping as an App Router project ready for production demos and ThemeForest delivery.

The core strength of Norio is its motion layer: GSAP-powered scroll, text, and interaction effects, plus Three.js treatments for fluid, glass, and grid-deform moments — all initialized client-side so App Router navigation stays clean. Semantic React sections, SCSS, and a single design-token source keep the template consistent in light and dark mode and easy to customize.

This template includes a Figma design file, making it easy to customize and develop this template to your liking.

Norio ships with Next.js 16 (App Router), React 19, TypeScript, and SCSS — no Bootstrap and no Tailwind in the template runtime. Section components and JSON content stay lean and readable, so you can restyle, extend routes, or adapt the stack without fighting a bloated UI kit.

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.

We are continuing to work hard to develop this item, more homepages and more great features will be added. You only need to buy 1 time and get lifetime updates.

---

Unlock the Power of Norio

• Creative Agency & Portfolio Layouts – Three distinct homepages, five project showcases, and essential inner pages including Studio, Work, Services, Pricing, Feed, Team, Careers, FAQs, and Contact.
• Next.js 16 App Router + React 19 + TypeScript: Production-ready App Router pages, reusable section components, and typed content from JSON. No Bootstrap. No Tailwind.
• SCSS Design Token System – Colors, type, space, radius, and motion live in one token source and compile to CSS custom properties, so branding changes stay consistent across light and dark mode.
• High-End GSAP Animations – GreenSock (GSAP) for ultra-smooth transitions, scroll-triggered motion, text reveals, and interactive cursor effects (ScrollTrigger, ScrollSmoother, SplitText).
• Three.js Visual Effects – Fluid ink, glass texture, and grid-deform treatments add depth to hero and media moments without a heavy UI kit.
• Client-Only Motion Bootstrap – Effects load after hydration with proper cleanup on route changes, so remounts stay stable in the App Router.
• Static Export Ready – Configured for static HTML export (`out/`) so demos deploy cleanly to Cloudflare Pages and similar hosts.
• Figma Design File Included: A comprehensive UI kit is provided to help you prototype and refine your vision before deployment.
• Optimized for Core Web Vitals – Engineered for fast loading and clean SEO metadata (Open Graph / Twitter) to keep search visibility and perceived performance high.
• Premium Typography & Assets – Inter via next/font and curated graphical components give the studio a sharp, editorial voice.
• Dark & Light Mode Ready – Semantic color tokens flip automatically between light and dark, with optional per-page scheme pinning via SiteShell.
• Detailed Documentation: Step-by-step guides in the Norio Next.js documentation kit make setup and customization straightforward.
• Retina Ready & Ultra-Responsive: Whether on a 4K monitor or a smartphone, Norio scales cleanly and stays pixel-sharp.
• Cross Browser Compatibility: Fully tested across Chrome, Safari, Firefox, and Edge for consistent performance.
• Free Lifetime Updates & Support: Your purchase includes lifetime access to future versions and dedicated technical support.
• Structured Visual Hierarchy: Norio balances high-contrast type, disciplined spacing, and bold content presentation — implementation-first, never decorative for its own sake.
• 100% Google Mobile-Friendly: Built to pass responsiveness checks and stay comfortable on phones and tablets.
• Clean, Maintainable Code: Readable React components, BEM-style SCSS, and JSON-driven content designed for professional developers.

What You Get

1. Production-ready Next.js Template (norio-nextjs-dev)
2. Full Development Source Code (App Router, React, TypeScript & SCSS)
3. Original Figma Design File
4. Comprehensive Documentation (norio-nextjs-doc)
5. Envato License

Requirements

• Node.js 18.18+ (20+ recommended)
• Valid GSAP Club license for production use of ScrollSmoother and SplitText

Next.js Pages

All 29 App Router routes under src/app/ (plus the 404 / not-found page). Preview each route on the live demo.

Homepages

• Home 1 Light — /
• Home 2 Light — /index-2
• Home 3 Light — /index-3
• Home 1 Dark — /index-dark
• Home 2 Dark — /index-2-dark
• Home 3 Dark — /index-3-dark

Showcase

• Works — /works
• Projects 01 — /projects-1
• Projects 02 — /projects-2
• Projects 03 — /projects-3
• Projects 04 — /projects-4
• Projects 05 — /projects-5
• Project Details — /project-details

Studio

• About — /about
• Services — /services
• Service Details — /service-details
• Team — /team
• Team Details — /team-details

Feed

• Feed — /feed
• Single Post — /single-post

Business

• Pricing — /pricing
• Contact — /contact
• FAQs — /faqs
• Jobs — /jobs
• Job Details — /job-details

Utility

• Help — /help
• Terms — /term
• Privacy — /privacy
• 404 — App Router not-found

Note

• All preview images are included and were generated via AI platforms. You are free to use them for your projects.
• This is a professional Next.js template, not a WordPress theme and not a plain HTML package.
• ScrollSmoother and SplitText require a valid GSAP Club membership for production use.

Change log

    VERSION 1.0.0
    - Initial Release: Next.js 16 App Router port from the Norio HTML master.
    - React 19 + TypeScript + SCSS token system.
    - GSAP 3.15 (ScrollTrigger, ScrollSmoother, SplitText) + Three.js WebGL sections.
    - GLightbox, odometer counters, dark/light color schemes.
    - Static export ready for Cloudflare Pages (out/).