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
- Open the HTML template folder (the folder that contains
index.htmlandassets/). - Install the Live Server extension if needed.
- 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.htmlandassets/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.