Applying Effects

A demo that is very aesthetically pleasing can be expected to have a higher engagement rate. Fable has some special effects that you can apply to the demo which will make them very eye catching.

Fable has two kinds of effects:

• On screen effects: On screen effects are effects that are applied to the elements on the screen. The different kinds of on screen effects are:
  • Sincity: Make the whole page black and white except the selected element.
  • Clarity: Make the whole page blurred out except the selected element.
  • Material Design: Apply Google’s material design focus style to the selected element.
  • Cyberpunk: Apply effects that have a feel of a post apocalyptic world.
  • Custom: You can apply custom effects by adding some custom CSS code.
• On guide effects: On guide effects are effects that are applied to the guide (e.g. all the guides in the demos in the help center have a wave effect applied to them). The different kinds of on guide effects are:
  • Wave: Apply a wave effect on guide.
  • Beckham: Apply a lighter color bend through the edge effect.
  • Bleeding Edge: Apply an effect of bleeding a complementary color through the edge.
  • Glass Ceiling: Apply a glass effect on the annotation.
  • Custom: You can apply custom effects by adding some custom CSS code.

The following interactive demo shows how you can apply these effects to a demo and make them irresistible.