Overview

Norio is a premium React 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 a Vite + React Router SPA 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 SPA 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 React 19, Vite 6, React Router, 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.
• React 19 + Vite 6 + React Router + TypeScript: Production-ready SPA 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 in the SPA shell with proper cleanup on route changes, so remounts stay stable with React Router.
• SPA Build Ready – Vite production build to dist/ with Cloudflare Pages-friendly SPA redirects (public/_redirects).
• 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 document titles so demos stay sharp and snappy.
• Premium Typography & Assets – Inter via @fontsource/inter 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 React 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 React Template (norio-react-dev)
2. Full Development Source Code (Vite, React Router, React, TypeScript & SCSS)
3. Original Figma Design File
4. Comprehensive Documentation (norio-react-doc)
5. Envato License

Requirements

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

React Pages

All 28 React Router routes under src/pages/ (plus the catch-all 404 / NotFound 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 — catch-all NotFoundPage

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 React 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: React 19 + Vite 6 + React Router SPA port from the Norio HTML master.
    - TypeScript + SCSS token system.
    - GSAP 3.15 (ScrollTrigger, ScrollSmoother, SplitText) + Three.js WebGL sections.
    - GLightbox, odometer counters, dark/light color schemes.
    - SPA build ready for Cloudflare Pages (dist/ + _redirects).