Get Elements Hive

WebGL Kinetic Typography

The WebGL Kinetic Typography is a versatile extension for the Breakdance section element that allows you to create your own 3D Interactive Backgrounds.

Shape

  • Shape Type: The 3D Mesh to be used
  • Image
    •  Texture: The image to apply on the chosen mesh
    • Repeat Horizontal: The number of times to repeat the image horizontally
    • Repeat Vertical: The number of times to repeat the image vertically
  • Image Animation
    • Animate Image: Apply a marquee animation of the given image
    • Axis: The axis of the animation
    • Direction: The direction of the animation
    • Speed: The animation speed
  • Transform:
    • Position: The horizontal and vertical position of the shape
    • Rotation on X Axis: The rotation of the shape on the X Axis
    • Rotation on Y Axis: The rotation of the shape on the Y Axis
    • Rotation on Z Axis: The rotation of the shape on the Z Axis

 

Camera Zoom

  • Camera Zoom: The camera zoom level

 

Effects

  • Displacement:
    • Enable: Applies a distortion effect on the mesh
    • Strength Factor: The strength of the distortion
    • Speed Factor: The speed of the distortion
  • Swirl:
    • Enable: Applies a radial skew effect on the image. The higher the factor the wavier the skew will become
    • Direction:  The effect’s direction
    • Swirl Factor: The effect’s factor
  • Twist:
    • Enable: Deforms the mesh by twisting it on the X axis
    • Twist Factor: The effect factor
  • Wave:
    • Enable: Applies a wave effect on the mesh
    • Enable Ripple Shadow: Applies a shading effect by adding a shadow to the generated waves
    • Frequency: The waves frequency
    • Amplitude: The waves amplitude
    • Speed: The effect’s speed
  • Fog:
    • Enable: Applies a color overlay on the Z axis. You can blend the mesh and the background by applying the same background color to the fog color
    • Color: The fog color
    • Intensity: The intensity/density of the fog
  • Fresnel:
    • Enable: Applies a Fresnel effect on the mesh by mixing an additional color. The visual result will depend on the shape type used, and transforms applied, and will basically make different sides of the mesh highlighted differently as if there is some type of lighting applied to the scene.
    • Color: The effect’s color
    • Intensity: The effect’s intensity
  • Mouse Follow:
    • Enable: The mesh follows the mouse position. On touch devices, screen taps ( not move ) are used instead
    • Distance Factor: The factor applied to the distance the mesh is moved, the distance factor and camera zoom levels dictate how far the mesh will be moved

 

Apply to whole page

  • Apply to whole page: The background will be applied to the whole page.