More than a decade ago, a shopping complex located at Omotesando, Tokyo had an inspiring website displaying swirling words flowing into vortex. I was just so keen to recreate the same or at least similar concept design to gain that nearly meditating feeling of watching the gyre.
The original work was produced by THA LTD, as "GYRE WORLD REFLECTOR." All the credits go to them – I just merely enjoy the visual and the sound by myself.
The text is generated by ChatGPT and stored in MongoDB. The app fetches the text based on the selected language and the topic. The text is then spoken using Web Speech API.
The recommended platform is Chrome on macOS, at the moment. Topics and languages can be easily extended by registering new entries to the DB.
See the running example at https://gyre-clone.vercel.app
If you are not using Vercel and want to self-host the app:
- Rename the
.env.local.exampleto.env.local, which contains a MongoDB URL to access the docker service.
mv .env.local.example .env.local- Download a preset data (
messages.json) inside/datadirectory to seed the database.
mkdir data && curl -o data/messages.json https://gyre-clone.vercel.app/api/message/export- Build the docker image.
docker compose build- Run the services; the app is up and running at localhost:9763
docker compose up -d- Create a new text file contains a paragraph per line. The file name should be
<topic>_<language code>.txt(e.g.,food_en-GB.txt). - Run the
scripts/post.jswith yourendpointanddirthat contains the text file(s). In the example below, the text file is placed underdatadirectory.
node scripts/post.js http://localhost:9763/api/message data