Bento Card with Interactive Border Glow and Inner Highlight
Quick Setup:
You can copy-paste this component directly into your Webflow project and style it however you want.
[c-Final - First Bento Grid]
Required Attributes:
1. [a-data-flow = cards]
Defines the parent element that contains the cards. When the mouse enters this element, you start seeing the glow on the borders.
2. [a-data-flow = card]
Defines the card element. The glow is inside this div.
3. [a-data-flow-color-border = #your-color]
Sets the border glow color. Accepts CSS variables, functions, or static color values.
4. [a-data-flow-color-card = #your-color]
Sets the inner glow color. Accepts CSS variables, functions, or static color values.
Optional Settings:
Use variables and the color-mix function. You can set the card’s inner glow to something like: [a-data-flow-color-card = "color-mix(in srgb, var(--pink) 20%, transparent)"]. Here we are using a color variable, which can be the same as the border color, but set it to 20% opacity with the color-mix function.
In the code, [a-data-flow-color-card] there are two default values that you can change if you want.
[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]
[ag-1-d-Defines the card element. The glow is inside this div.]
[ag-1-a-date-flow = card]
[ag-2-d-Sets the border glow color. Accepts CSS variables, functions, or static color values.]
[ag-2-a-date-flow-color-border = #your-color]
[ag-3-d-Sets the inner glow color. Accepts CSS variables, functions, or static color values.]
[ag-3-a-date-flow-color-card = #your-color]
Dot Waves
Create mesmerizing wave patterns with colorful dots that flow across your website. Fully customizable colors, speed, and animation styles.
Webflow Localisation Anchor link fix
Fix anchor links on localized pages in Webflow. This drop-in script (1) detects secondary locales from the URL, (2) prefixes internal links that are missing the current locale, (3) preserves smooth scrolling for same-page #anchors, (4) skips language-switcher links via hreflang or data-flow-locale-skip, (5) avoids assets/external links, and (6) re-initializes Webflow IX2 after updates. Works from the <head> or “Before ”.
How to add a custom map to webflow with MapBox
This is how you can add a custom style map, connected to the CMS to your project
blur
aykut
ay
How to Auto-Update Your Footer Date in One Click? Copy 3
You don’t need to manually update the year in your footer anymore. Simply copy and paste our year component into Webflow ...
DONT REMOVE (EXAMPLE DATA)
You don’t need to manually update the year in your footer anymore. Simply copy and paste our year component into Webflow ...
Wavy 3D Blob Animation
A quick guide to embedding a dynamic 3D blob with Three.js and GSAP in Webflow—complete with copy‑to‑clipboard buttons for every code snippet.
Automatically Update Your Footer Date
You don’t need to manually update the year in your footer anymore. Simply copy and paste this component in your website
Template (do not delete)
You don’t need to manually update the year in your footer anymore. Simply copy and paste our year component into Webflow ...
You can copy-paste this component directly into your Webflow project and style it however you want.
[ag-0-d-This is the description]
[ag-0-a-name = value]
[ag-0-a-name = value]- This is the description[li-a-name = value]Click to Copy[li-a-name = value]
- This is the description[li-a-name = value][li-a-name = value]
- This is the description[li-a-name = value][li-a-name = value]
Quick Setup:
You can copy-paste this component directly into your Webflow project and style it however you want.
[c-Final - First Bento Grid]
Required Attributes:
- this is the head. should it be the first item or should it be the first heading before the list?
- data-flow = card: Defines the card element. The glow is inside this div.
- data-flow-color-border = #your-color: Sets the border glow color. Accepts CSS variables, functions, or static color values.
- data-flow-color-card = #your-color: Sets the inner glow color. Accepts CSS variables, functions, or static color values.
Optional Settings:
Use variables and the color-mix function. You can set the card’s inner glow to something like: [a-data-flow-color-card = "color-mix(in srgb, var(--pink) 20%, transparent)"]. Here we are using a color variable, which can be the same as the border [a-data-flow-color = "transparent)"] color, but set it to 20% opacity with the color-mix function.
In the code, there are two default values that you can change if you want.