---
title: "Shift"
canonical_url: "https://framerhub.io/components/shift"
last_updated: "2026-06-15T14:46:31.414Z"
---

## Shift

Add a layer of calm sophistication with Shift. Soft, oversized orbs drift lazily across the screen, slowly changing color to create a breathing, living background that sets a mood without distraction.

## Features

**Ambient Motion**
The movement is intentionally slow and fluid, designed to sit comfortably behind content without competing for attention.

**Gentle Color Shifts**
Colors slowly rotate through hues, creating a dynamic gradient that feels fresh every time you look at it.

**Soft Bokeh**
Heavy blurring creates a depth-of-field effect, making the shapes feel like distant lights or soft reflections.

## Use Cases

**Landing Pages** — Create a calm, premium atmosphere.

**Portfolios** — Add visual depth without overwhelming your work.

**Meditation/Wellness Apps** — Perfect for relaxing, ambient experiences.

**SaaS Products** — Elegant backgrounds for modern applications.

![Shift Preview](/framerhub/img/components/control/shift.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 Shift 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)

### Customization

Customize the appearance and behavior using Framer's property controls.

**Color Settings**

- Base Hue: Starting hue (0-360)
- Hue Range: Color variation
- Saturation/Lightness: Color intensity

**Orb Settings**

- Intensity: Number of orbs
- Base Radius / Radius Range: Orb sizes
- Base Speed / Speed Range: Movement speed

**Effects**

- Blur Amount: Bokeh softness

### Quick Tips

**Best Performance** — Keep intensity at 1 or below for smooth animation.

**Color Combinations** — Blue/purple hues (200-280) feel calming. Warm hues (0-60) feel energetic.

**Layering** — Place content above with contrasting text colors for readability.

**Blur Settings** — Higher blur creates dreamier effect, lower blur shows more distinct orbs.

## License

**Free Component** — Use freely in personal and commercial projects.

## Refund Policy

Due to the nature of our digital products, we are unable to offer refunds, but we're here to assist you with any questions or concerns!

## Credits

[Ambient Canvas Backgrounds](https://github.com/crnacura/AmbientCanvasBackgrounds) by [Sean Free](https://codepen.io/seanfree/) for [Codrops](https://tympanus.net/codrops/?p=36743).

---