Flowing Rivers FREE

Create Organic 3D Experiences

A stunning 3D animation component featuring organic flowing lines that follow the surface of an invisible sphere, creating mesmerizing river-like patterns.

Features

Organic Flowing Lines Beautiful flowing lines that naturally follow the surface of an invisible sphere, creating organic, river-like patterns.

Sphere Surface Raycasting Advanced raycasting technology ensures lines perfectly follow the curved surface of the sphere.

Background Starfield Optional twinkling stars in the background add depth and atmosphere to your scene.

Mouse Interaction Enable camera orbit control with mouse movement for an interactive experience.

Customizable Colors Choose up to 6 vibrant colors for your flowing rivers. Lines will randomly use these colors.

Use Cases

Hero Sections — Perfect for modern, artistic hero sections and landing pages

Portfolio Sites — Showcase creativity with organic, flowing backgrounds

Brand Experiences — Create unique brand experiences with custom color palettes

Abstract Backgrounds — Add visual interest to any page with mesmerizing patterns

How to Use

Installation

VIDEO PLACEHOLDER: Installation Tutorial

1. Log in to your account at framerhub.io
2. Navigate to framerhub.io/dashboard
3. Find Flowing Rivers in your Recent Purchases
4. Click the "Copy" button
5. Open your Framer project
6. Paste the component anywhere on your canvas (Cmd/Ctrl + V)

Use the property controls to customize your flowing rivers effect.

River Colors

• Color 1-6 — Customize up to 6 colors for the flowing rivers

Background

• Background Color — Set a background color for the entire canvas
• Star Count — Number of background stars (0-2000)
• Star Color — Color of the background stars
• Star Size — Size of the background stars (0.01-0.2)

Animation

• Speed — Control how fast the rivers flow (0.1-5)
• Line Width — Thickness of the river lines (0.01-0.2)

Interaction

• Enable Mouse Effect — Toggle camera orbit based on mouse movement

Quick Tips

Best Aesthetics — Use dark backgrounds with vibrant river colors for maximum contrast. Try analogous color schemes for harmonious flows.

Speed Settings — Slower speeds (0.5-1) feel meditative and calming. Faster speeds (2-4) create energetic, dynamic scenes.

Background Stars — Add background stars for cosmic atmospheres. Try 500-1000 stars for subtle depth, 1500-2000 for rich starfields.

Color Harmony — Use color gradients between adjacent colors (e.g., blues to purples to pinks) for smooth, natural-looking flows.

Credits

Built upon Animated Mesh Lines by Jeremboo for Codrops.

Why Designers Love This

Create unique, organic 3D experiences with flowing rivers that naturally follow spherical surfaces. Built with advanced Three.js raycasting for smooth, mesmerizing animations.

Need Help? Visit framerhub.io/support for documentation and video tutorials.