Select your language

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

v1.3 Stable MIT Licence
Last update:
January 01, 2022
Particle Gantry 5.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.3
    • Integration of French translation into the package
Changelog - version 1.2
    • Adaptation SCSS to the new Gantry 5.5 compilator
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.3 Licence MIT
Last update:
January 01, 2022

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.

New: french version of particle interface is now include into the package. Install the last version of the particle via Joomla administration.
After install, in your folder "/templates/g5_hydrogen/custom/particles"
rename file "etl_particle-fss.yaml" to "etl_particle-fss_EN.yaml"
rename file "etl_particle-fss_FR.yaml" to "etl_particle-fss.yaml" Warning: If you use an old french version, you will have 2 versions of this particle after new version installation.
In this case, you have to recreate new version particle.
Before deleting old version particles, manage necessary copy first from old particles into new particules.
Then uninstall old particle version from Joomla (Joomla extension manager usage).
I recommend to reintall again new version just after this deletion process.

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