h2 heading

paragraph.
more thext.

new p line.

Another h3

how to add a component copy button:
[c-Wavy-dots]
‍

How to add attributes inline: [a-data-flow-animation = random]

simple normal list:

• "circle": Creates rippling waves that spread in all directions from the center, like dropping stones in a pond
• "waves": Simulates ocean waves rolling across the screen in one direction
• "chaos": Creates unpredictable, energetic movement with dots shifting and swirling randomly
• "random": Produces organic, irregular ripples with varying wave patterns that feel natural and less predictable

Add an attribute

[a-data-flow-animation-speed = 3]

Add an attribute inline

Some text and then [a-data-flow-animation-speed = 3] some more text

how to add a list of attributes

list 1

[ag-0-d-Defines the parent element that contains the cards. When the mouse enters this element, you start seeing the glow on the borders.]
[ag-0-a-date-flow = cards]
[ag-0-a-date-flllllowww = fawda]

list 2

[ag-1-d-Defines the card element. The glow is inside this div.]
[ag-1-a-date-flow = card]

‍

how to add code with the copy button

simply use the code block. Make sure it has light mode and no line number

   <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
    <!-- Tweakpane Library (required for visual controls) -->
    <script src="https://cdn.jsdelivr.net/npm/tweakpane@3.1.10/dist/tweakpane.min.js"></script>
    <script src="./scramble-working.js"></script>
    <script>
      // Enable Tweakpane visual controls (built into FlowScramble)
      // Target the #tweakpane-target button, or pass a custom selector/element
      // To disable: FlowScramble.tweakpane.disable()
      // To hide temporarily: FlowScramble.tweakpane.hide()
      // Docs: https://tweakpane.github.io/docs/
      
      window.addEventListener('load', () => {
        FlowScramble.tweakpane.enable();
      });
    </script>

‍

‍

-----

You don’t need to manually update the year in your footer anymore. Simply copy and paste our year component into Webflow, press publish, and you’re set. Adjust the design and everything else however you like. We’ll show you two easy options:

‍

Option 1: One-click copy-paste code and the year text

Option 2: Copy the code and select the year text yourself

---

Option 1: Copy and Paste in One Click

This component includes the "© 0000 Flowing.to. All rights reserved." text and the code needed to change the "0000" to the current year. You can customize the text entirely, but make sure the "0000" is wrapped in a attached to it in the settings.

---

Heading

‍

• List item
• List item
• List item
• List item

---

Option 2: Add the Code to Your Webflow Project

‍

Step 1: Open Project Settings or the Page Settings of the specific page you want to update in your Webflow project.

Step 2: In the Custom Code section, place the script below, before the closing

Step 3: Assign the text element you want to update automatically with the attribute

```html

<!-- Flowing components - By Kabarza.com -->

<script>

 document.addEventListener('DOMContentLoaded', () => {

   // Find elements with the [flw-year] attribute

   const yearTargets = document.querySelectorAll('[flw-year]');

   // Get the current year

   const currentYear = new Date().getFullYear();

   // Update text content for each target element

   yearTargets.forEach(target => {

     target.textContent = currentYear;

   });

 });

</script>

<div class="abcde">

hi

</div>

<style>

.hello{test:rgba(1,1,1,1);}

</style>

```

```

<!-- Flowing components - By Kabarza.com -->

<script>

 document.addEventListener('DOMContentLoaded', () => {

   // Find elements with the [flw-year] attribute

   const yearTargets = document.querySelectorAll('[flw-year]');

   // Get the current year

   const currentYear = new Date().getFullYear();

   // Update text content for each target element

   yearTargets.forEach(target => {

     target.textContent = currentYear;

   });

 });

</script>

```[js]

‍

---

“Now, enjoy an up-to-date copyright text, with zero ongoing maintenance! And hey, this is just the start—we’re working on more components to make your Webflow life even easier. Keep an eye out!”

‍