---
title: "Flowing Rivers"
canonical_url: "https://framerhub.io/components/flowing-rivers"
last_updated: "2026-06-15T14:46:29.612Z"
---

## 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

![Flowing Rivers Preview](/framerhub/img/components/control/flowing-rivers.jpg)

## 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](https://github.com/Jeremboo/animated-mesh-lines) by [Jeremboo](https://jeremieboulay.fr/portfolio/) for [Codrops](https://tympanus.net/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.