Truchet Weave BG

Truchet Weave Background is an interactive geometric background for Framer, created by Karim Saif.

Transform simple quarter-circle arcs into an endlessly evolving maze of flowing patterns. Each tile rotates and reconnects with its neighbors, creating hypnotic waves of geometry that feel both structured and organic.

Move your cursor across the canvas to influence nearby tiles with smooth, responsive rotations. Choose from five wave presets, adjust the colors and tile density, and fine-tune the motion to create a unique visual experience.

Built with Canvas rendering, responsive sizing, reduced-motion support, and performance-conscious animation.

A creative background for designers who want more than a static grid.

Great for:

• Creative portfolios — Add a distinctive geometric identity to your website.

• Agency websites — Create immersive hero sections and interactive backgrounds.

• Experimental design — Explore generative patterns and mathematical motion.

• Landing pages — Make your first impression more engaging.

• Art and design projects — Build visually striking compositions inspired by geometric systems.

• Interactive experiences — Give visitors a background that responds to their cursor.

Live preview:

https://truchetweavebackground.framer.website/

Features

• Interactive Cursor Response — Nearby tiles rotate smoothly as the pointer moves.

• 5 Wave Presets — Classic, Diagonal, Ripple, Flow, and Calm.

• Animated Geometric Patterns — Quarter-circle arcs continuously form evolving connections.

• Cursor-Only Mode — Set animation speed to zero for an interaction-driven background.

Support

Need help, have feedback, or want to share what you've created with Truchet Weave Background?

• X / Twitter: @karimsaif0

• Email: karimsaif010@gmail.com