---
title: "Magnetic Liquid Core — Framer component · Best of Framer"
description: "$5.00 · Framer component · by Sirrah Space · Backgrounds. Give your website a futuristic, high-tech aesthetic with the Magnetic Liquid Core."
canonical: "https://framer.elliotli.dev/component/magnetic-liquid-core"
---

[Home](/)/[Components](/components)/[Backgrounds](/components/category/backgrounds)/Magnetic Liquid Core

# Magnetic Liquid Core

Interactive WebGL magnetic core.

[View on Framer](https://framer.com/marketplace/components/magnetic-liquid-core/?via=elliot-li)

![Magnetic Liquid Core preview image 1](https://framer.elliotli.dev/og/component/magnetic-liquid-core/6929b2c931343c99/1600x1200.jpg)

## Summary

Give your website a futuristic, high-tech aesthetic with the Magnetic Liquid Core.

## Description

Give your website a futuristic, high-tech aesthetic with the **Magnetic Liquid Core**. This advanced WebGL background component renders a stunning, glowing orbital ring filled with a custom inner color and surrounded by thousands of dynamic floating particles.

Designed for maximum interactivity, the core and its particles react magnetically to the user's cursor. As the mouse moves across the canvas, the fluid ring warps and the particles pull toward the cursor, creating a highly immersive and satisfying visual experience. Engineered for top-tier performance, it leverages pure GLSL shaders and includes a smart visibility sensor that automatically pauses rendering when scrolled out of view. Perfect for Web3 platforms, modern SaaS landing pages, and creative portfolios.

**Functions (Key Features):**

-   🧲 **Magnetic Interaction:** The fluid core and particles warp and pull dynamically towards the user's cursor based on customizable strength and range parameters.
    
-   ✨ **Particle Swarm:** Renders up to 30,000 orbiting particles with fluid, wave-like physics for a dense, atmospheric look.
    
-   🎨 **Custom Fill & Glow:** Independent color controls for the background, glowing core edge, internal core fill, and particles.
    
-   📏 **Precise Positioning:** Easily offset the core along the X and Y axes to perfectly frame it within your specific layout.
    
-   🚀 **Optimized Performance:** GPU-accelerated WebGL rendering with an automatic off-screen pause mechanism to conserve battery and CPU.
    

## Rank history [How rankings work →](/terms#rankings)

-   All · #4212

## Details

- **Author**: Sirrah Space
- **Price**: $5.00
- **Published**: 2026-05-14
- **Updated**: 2026-07-26
- **Added**: 2026-05-11
- **Categories**: Backgrounds

## More like this

-   [Pixel Flicker](/component/pixel-flicker) — Design Foundry · $10 — premium animated pixel background
-   [Fractal Glass Wave](/component/fractal-glass-wave) — Hienn Ng · $3 — Dynamic Fractal Glass Background
-   [Particle Flow Pro](/component/particle-flow-pro) — Interface Studio · $10 — Bring Your Background to Life
-   [Silk Gradient](/component/silk-gradient) — Kaisa A · Free — Silk Gradient Background