Local Preview

Rasuke uses GSAP scroll effects and Three.js WebGL (grid / hover image deformation and the Showcase 2 WebGL carousel). Those features need a normal browser origin. How you open the HTML files matters.

Recommended: run a local server

Always preview the template over HTTP (http://localhost), not by double-clicking files. A local server gives the full experience in every modern browser (Chrome, Edge, Firefox, Safari).

Option A — VS Code / Cursor Live Server
  1. Open the HTML template folder (the folder that contains index.html and assets/).
  2. Install the Live Server extension if needed.
  3. Right-click index.html → Open with Live Server.
Option B — Node / Python one-liner

From the template root:

npx --yes serve .
# or
python -m http.server 8080

Then open http://localhost:3000 (or the port shown / 8080) in your browser.

Option C — Vite source kit

If you are working in rasuke-html-dev, use the built-in server:

cd rasuke-html-dev
npm install
npm run dev

Preview at http://localhost:3000. See also Development.

Opening files with file://

The classic ThemeForest package (npm run build:html → dist-html/) is built to open from disk: Vite module entries are replaced with classic vendor scripts (GSAP, ScrollTrigger, ScrollSmoother, ScrollToPlugin, SplitText, Three.js, GLightbox) plus an IIFE app bundle, so pages work over file://.

Browsers still treat local files under a strict security model. Rasuke detects this in src/assets/js/file-protocol.js (isFileProtocol() / canUseLocalWebGlTextures()):

  • If you open the template via file://, use Google Chrome (or Microsoft Edge). Chromium is the most reliable for local WebGL previews.
  • Firefox treats each local file as a unique origin, so WebGL cannot sample image/video textures (The operation is insecure). Deformation effects fall back to the static DOM image instead of failing.
  • iOS WebKit gets the same conservative treatment for inline video — see src/assets/js/ios-webkit.js.
What works on file://
  • Layout, typography, dark/light mode, most CSS animations
  • GSAP scroll and UI motion (when scripts load)
  • WebGL showcases in Chrome / Edge (with the shipped ThemeForest package)
What may fail or look incomplete
  • Firefox / Safari on file:// — WebGL textures from local images are restricted; the static fallback image is shown
  • Some advanced texture / deform effects that require a normal HTTP origin
Quick checklist
  • Best: local server → any modern browser
  • Quick peek without a server: open with Chrome or Edge
  • Hard-refresh (Ctrl + F5) after copying a new package so cached assets do not stick
  • Keep the folder structure intact — index.html and assets/ must stay siblings

Note: production sites should always be deployed on a real host (Netlify, Cloudflare Pages, Vercel, shared hosting, etc.). The notes above are only for local preview before upload.