Download area
Free area. En toutes lettres shall not be held responsible for possible malfunctions related to the use of these files.
Version : 1.1
Animated background - FSS - Flat Surface Shader

v1.1 Stable MIT Licence
Last update:
March 13, 2021
Particle Gantry 5Joomla!GravWordpressphp 7

Flat Surface Shader (FSS) animated background is written in JavaScript by Matthew Wagerfield and Tobias van Schneider for rendering lit Triangles to a number of contexts. Basically, this tool takes geometry, light and triangles and turns it into something fun, exciting and beautiful that everyone can use. With this Flat Surface Shader, triangles are rendered into three different contexts (WebGL, Canvas 2D and SVG).
You can see demo from developper here or one funny example of use here Flat Surface Shader Earth
On my side, I render FSS using a Canvas support.You can choose between 7 color presets or you can configure the Canvas yourself.

For Gantry 5, template Hydrogen.

For other templates, unzip the file and do a manual installation

Don't forget to add these 2 lines

@import 'dependencies';

@import 'etl_particle-fss';

in your custom.scss (/templates/g5_hydrogen/custom/scss/custom.scss)

or create this file and insert these 2 lines with the help of your text editor (/templates/g5_hydrogen/custom/scss/custom.scss)

See Demo

Changelog - version 1.1
    • Option Canvas height: in some case, full render, you have to fix heght of canvas to 100%

Github datas: information and Download
Release name
Download  (size)
Download count 
Release date 
Active days
v1.11 Licence MIT
Last update:
March 13, 2021

The particles in English or in French are technically identical: Only the interface of the particle need to be translated (yalm file). The twig and scss files are similar.

Changelog - version 1.11
    • Files etl_particle-fss-fr.scss renamed etl_particle-fss.scss, etl_particle-fss-fr.html.twig renamed etl_particle-fss.html.twig, etl_particle-fss-fr.yaml renamed etl_particle-fss.yaml

Under construction
Manual installation
Gantry 5Joomla
  • UNZIP the file on your computer.
  • You will find some directories (particles, scss, js, images)
  • Copy the directories (including files) to root/templates/TEMPLATE_DIR/custom/ via your FTP client (like FileZilla)

Become a privileged customer!


En Toutes Lettres is a french company but have no border. We are always present for additional information :

logo gris
  (33) 6 29 16 98 38
En toutes lettres
4 rue Antoine Bréguet

Last comments