---
title: "Neon Trails"
canonical_url: "https://framerhub.io/components/neon-trails"
last_updated: "2026-06-15T14:46:30.401Z"
---

## Create Mesmerizing Neon Experiences

A stunning 3D animation component featuring colorful spiral helix patterns with forward-moving neon lines and interactive camera controls.

## Features

**Spiral Helix Pattern**
Mesmerizing spiral lines that create a dynamic helix pattern as they move forward through 3D space.

**Neon Aesthetics**
Vibrant neon-style lines with customizable colors create eye-catching visual effects.

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

**Customizable Colors**
Choose up to 5 vibrant colors for your neon trails. Lines will randomly use these colors.

## Use Cases

**Tech Websites** — Perfect for modern tech companies, SaaS products, and digital agencies

**Hero Sections** — Create attention-grabbing hero sections with futuristic aesthetics

**Product Launches** — Add visual excitement to product launch pages and announcements

**Portfolio Sites** — Showcase creativity with dynamic, artistic backgrounds

![Neon Trails Preview](/framerhub/img/components/control/neon-trails.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 Neon Trails 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 neon trails effect.

**Trail Colors**

- Color 1-5 — Customize up to 5 colors for the neon trails

**Background**

- Background Color — Set a background color for the entire canvas

**Animation**

- Speed — Control how fast the trails move forward (0.1-5)
- Line Width — Thickness of the neon trails (0.01-0.2)
- Line Count — Number of spiral lines (10-100)
- Frequency — How often new trails are generated (0.1-10)
- Max Lines — Maximum number of simultaneous lines (10-200)

**Interaction**

- Mouse Control — Toggle camera orbit based on mouse movement
- Mouse Sensitivity — How much the camera reacts to mouse movement (0.1-2)
- Mouse Smoothing — Camera movement smoothness (0.01-0.2)

### Quick Tips

**Best Aesthetics** — Use dark backgrounds (black or deep navy) with bright neon colors for maximum visual impact.

**Speed & Energy** — Slower speeds (0.5-1.5) feel cinematic and elegant. Faster speeds (2-4) create energetic, dynamic scenes.

**Line Count** — Fewer lines (10-30) feel minimal and sophisticated. More lines (50-100) create dense, cyberpunk atmospheres.

**Mouse Interaction** — Enable mouse control for interactive experiences. Adjust sensitivity and smoothing for precise feel: low smoothing = responsive, high smoothing = cinematic.

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

Transform your website with futuristic neon aesthetics. Built with Three.js for smooth 60fps performance, this component creates mesmerizing spiral patterns that captivate visitors.

---

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