explaingit

ringhyacinth/hyacinth.im-site

★ 32HTMLAudience · designerComplexity · 3/5ActiveSetup · easy

TLDR

The built static deployment of Ring Hyacinth's 3D portfolio site, a walkable hand-painted plaza with a cat avatar that visits posters, a cinema tent, and project boards.

Mindmap

mindmap
  root((hyacinth-im-site))
    Inputs
      Keyboard WASD
      Mouse drag
      E to interact
    Outputs
      Interactive 3D scene
      Project pages
      MP4 playback
    Use Cases
      Browse a creative portfolio
      Watch film works
      Open social links
    Tech Stack
      React
      Three.js
      Vite
      Tailwind

Things people build with this

USE CASE 1

Open the live site in desktop Chrome and walk around the plaza

USE CASE 2

Read the bilingual project pages by clicking the highlighted poster boards

USE CASE 3

Watch the 720p screenings inside the circus tent cinema

USE CASE 4

Self-host the static build by copying the assets and docs folders to any web server

Tech stack

ReactThree.jsViteTypeScriptTailwind

Getting it running

Difficulty · easy Time to first run · 5min

The actual source is private; this repo only contains the prebuilt static output, so you cannot rebuild it from scratch.

In plain English

This repository is the public deployment artifact for Ring Hyacinth's interactive 3D portfolio site. The actual source code, which the README says is a React, Vite, and Three.js application, lives in a private workspace. What you see here is the built static output, the optimized images and videos, and a manual describing how to use the site, so visitors can read about and open the project without the production workspace being exposed. The live site is hosted at ringhyacinth.github.io/hyacinth.im-site. The page drops the visitor into a low-poly, hand-painted style plaza where you walk a little cat character past poster boards, a circus-tent cinema, a collab shop, a small radio area, and several social and biographical sculptures. The README recommends opening it on desktop Chrome, Edge, or Safari with sound on, since the layout was designed for desktop exploration. Mobile loads but the experience is reduced. Controls are W and S to move forward and back, A and D to turn, mouse drag to look around, E to interact with the nearest highlighted object, and 1 to talk to a guide character called Nika. Clicking nearby objects opens the same interactions. Poster boards open bilingual project pages with compressed MP4 playback. The circus tent acts like a screening room with a randomized program list. There is also a mailto-based note flow and links out to Twitter, Weibo, Jike, and Xiaohongshu. The README lists the eleven film and creative-tech works on display, explains that the public site ships only 720p H.264 web copies of the videos to keep the static site under about 121 MB, and shows the repo layout under assets and docs. The tech stack noted for the original source project is React, Vite, TypeScript, Three.js with @react-three/fiber, drei, and rapier, plus Framer Motion and Tailwind CSS.

Copy-paste prompts

Prompt 1
Fork hyacinth.im-site and swap the cat avatar model with my own GLB character
Prompt 2
Reduce the 121 MB asset footprint by re-encoding the MP4 posters to AV1
Prompt 3
Add WebXR support so the plaza can be walked in a VR headset
Prompt 4
Generate a mobile-only fallback layout that replaces the 3D scene with a scrollable gallery
Prompt 5
Write a small Node script that lists every poster and its destination URL from the static build
Open on GitHub → Explain another repo

Generated 2026-05-22 · Model: sonnet-4-6 · Verify against the repo before relying on details.