learn GLSL from zero
ToolsCreate with shadersShader MakerFree online shader builderToolkitShader works ready for your siteSketcher LabPaint your landing’s hero with shaders3D StudioThe Three.js editor in your browser
GamesPlay with shadersOnomatoShaderType a word, blow it upThe WatcherAn eye that follows youAetherLiquid glass with an eye insideBloomcoreA word grows a garden of lightPyrokineThrow fire at the wallVoltaicThe pyramid throws lightningSurfSurf a shader ocean

Shader animation

Motion is time used on purpose. You build breathing, phase offsets, elastic easing, morphs, flow fields and a seamless loop.

  1. BreatheThe circle breathes. The shadow grows with it.
  2. Drift layersFour planes at different speeds. Geometric depth.
  3. Phase offsetEach diamond starts on its own time. The wave.
  4. ElasticOvershoots, bounces, settles. Jelly square.
  5. MorphCircle mutates into hexagon. The shape cannot decide.
  6. Flow fieldEach triangle spins at its own speed. Every corner its own law.
  7. Oscillator stackThree rings that never sync. Infinite motion.
  8. Seamless loopTriangle in perfect orbit. The loop that never cuts.
  9. RhythmThe hexagon beats. Peak and rest. Heart, not metronome.
  10. Your motionCombine everything. Your choreography of shapes.

Next section: Strange attractors on the GPU →

close