The ShimmerWave component is a highly customizable React component designed to create a visually appealing text animation effect, resembling a shimmering wave. It is intended for use within the Framer design tool, allowing users to easily add dynamic text animations to their projects.

Key Features:

  1. Text Content Customization: Users can input any text they desire, which will be displayed with the shimmering wave effect.
  2. Text Style Customization: Users can customize the appearance of the text, including color, font size, font family, and font weight.
  3. Animation Speed Customization: Users can control the speed of the shimmering wave animation, allowing for a range of effects from slow, gentle waves to fast, dynamic waves.

Properties

  1. services (String): The text content to be displayed with the shimmering wave effect. Default is "Lorem Ipsum...".
  2. textStyle (Object): An object containing text style properties:
    1. color (Color): The color of the text. Default is #46afc8.
    2. fontSize (Number): The font size of the text. Default is 16.
    3. fontFamily (String): The font family of the text. Default is 'Open-Sans', sans-serif.
    4. fontWeight (Number): The font weight of the text. Default is 600.
  3. animationSpeed (Number): The speed of the shimmering wave animation, in seconds. Default is 2.4. Range is from 0.1 to 10.

Price: Free

ShimmerWave Component Documentation

Click on "Copy Component" and paste it into your Framer project.

  1. Drag and drop the ShimmerWave component onto your Framer canvas.
  2. Customize the text content, text style, and animation speed using the property controls in the Framer properties panel.
  3. Preview the shimmering wave effect in real-time within the Framer design environment.
  4. Incorporate the ShimmerWave component into your Framer prototypes or projects to add dynamic text animations.
Made by FramerXplore :)