This project leverages the power of WebGL via Three.js and GLSL shaders to present a captivating text decoding experience. It showcases five distinctive text reveal effects, each with its unique animation style that can be used for website intro animations, etc.

For live demo please visit 👉 https://text-decoder-alpha.vercel.app/

The project uses the following technologies:

• Three.js for 3D WebGL rendering
• GLSL Shaders for custom graphical effects
• GSAP for robust and smooth animations
• lil-gui for an interactive GUI for controlling shader parameters
• Vite as a modern and fast build tool, configured to support GLSL

Please follow these setup instructions to get the project running locally:

• Node.js installed on your system.

Clone the repository and install dependencies:

git clone https://github.com/hkzone/fancy-text-decoder-shader-threejs.git
cd fancy-text-decoder-shader-threejs
npm install

Run the development server:

npm run dev

Build for production:

npm run build

The production-ready files will be in the dist/ folder.

Each of the five text decoding effects is meticulously crafted to showcase various visual styles.

The shader uses several uniform variables including time, resolution, and textures to drive the animation logic.

text(): Creates the visual representation of text characters from a sprite sheet texture. shine(): Adds light and contrast dynamics to the text to emphasize the decoding effect. main(): Serves as the entry point for fragment shader operations to render the final visual effect to the screen.

lil-gui is used to create a GUI for live interaction with shader uniforms. Press 'h' to toggle the controls visibility in the UI.

• src/script.js: Main JavaScript entry point for setting up the project and controling the logic.
• src/style.css: Styles for the canvas and any HTML UI.
• src/rendering.js: Sets up the Three.js rendering.
• src/shaders/: Directory containing GLSL shader files (.glsl).

If you'd like to contribute, please fork the repository, create a feature branch, and submit a pull request with your changes.

This work is licensed under a Creative Commons Attribution-NonCommercial 4.0 International License. For more information, see LICENSE or visit Creative Commons License

Made By Vitaliy Vlasyuk @hkzone

Twitter - Portfolio - Github