Mojave Particles Proは、Framerのためのプロフェッショナルグレードの粒子システムプラグインであり、豊かな物理ベースのアニメーションと優雅なUIコントロールをウェブデザインツールキットに提供します。Mojave Studioによって構築されたこのプラグインは、デザイナーがコードを書かずに動的でインタラクティブなビジュアルを作成できるようにします。
Choosing a Preset
Mojave Particles includes several built-in presets that define how particles look and behave. To select a preset, click your Mojave Particles layer on the canvas. In the right-hand sidebar, open the “Presets” dropdown and choose a style. The preview will update instantly as you scroll through options.
Preset descriptions:
Black Hole: The mouse acts as a gravitational pull that attracts nearby particles.
Snow: Gentle falling particles resembling snowflakes.
Rainbow: Multicolor glowing points that react to hover.
Laser: Bright orbs that expand when hovered.
Bubbles: Light, floating upward motion that feels soft and airy.
Network: Interconnected lines and nodes for a tech-forward look.
Galaxy: A star-field animation that follows your cursor.
Neon: High-contrast glowing cubes that pop on dark backgrounds.
Lava Lamp: Slow, blob-like organic movement for a calm, fluid feel.
Emoji: Replace particles with one or more emojis.
Text: Floating text that moves and reacts like particles.
Presets are a starting point. Every visual and motion property can be customized afterward.
Adjusting Particle Settings
When the Mojave Particles component is selected, all customization options appear in the right-hand properties panel.
Appearance controls:
You can adjust the particle count to change how dense the animation feels.
Use the size range sliders or input fields to control minimum and maximum particle size.
The color palette can be a single tone, a gradient, or linked to your Framer color variables.
Opacity sets how visible the particles are, and speed determines their overall movement intensity.
Behavior controls:
Gravity or drift settings change how particles move vertically.
Repulsion and attraction determine how they respond to your cursor.
Vibration adds gentle, random jitter for more natural motion.
Scroll reactivity lets particles respond to scrolling speed and direction.
Layout controls:
The background color defaults to #000005, matching Mojave’s dark theme.
You can adjust the Z-index to position the particles behind content layers.
Blend mode options like “Screen” or “Normal” let you fine-tune how particles interact visually with the background.
Interactivity Options
Mojave Particles supports built-in interactivity without any code. When hover response is enabled, particles will move or glow as your cursor passes over them. Click response adds expansion or bursts of motion when users click. Scroll awareness lets the animation move, fade, or change as the user scrolls through the page. For immersive pages, try combining hover and scroll reactivity together to create subtle, natural-feeling motion.
Creative Use Cases
Mojave Particles works best in places where motion enhances the experience without distracting from content.
Popular ways to use it include:
Hero sections with slow ambient movement.
Landing pages that react to scrolling or hovering.
Product backgrounds for added depth.
Tech or data-themed pages using the Network or Galaxy styles.
Portfolios that feel interactive and alive.
Small, deliberate motion can make your design feel dynamic while keeping focus on what matters.
Quick Examples
Floating Galaxy Background
Select the Galaxy preset. Set the particle count between 120 and 200. Lower opacity to around 60 or 70 percent, and enable scroll reactivity for smooth parallax-style motion.
Subtle Hero Glow
Choose the Neon preset. Set the count around 50 and use your brand’s primary color with low opacity. Keep scroll reactivity off for a calm, focused header effect.
Choosing a Preset
Mojave Particles includes several built-in presets that define how particles look and behave. To select a preset, click your Mojave Particles layer on the canvas. In the right-hand sidebar, open the “Presets” dropdown and choose a style. The preview will update instantly as you scroll through options.
Preset descriptions:
Black Hole: The mouse acts as a gravitational pull that attracts nearby particles.
Snow: Gentle falling particles resembling snowflakes.
Rainbow: Multicolor glowing points that react to hover.
Laser: Bright orbs that expand when hovered.
Bubbles: Light, floating upward motion that feels soft and airy.
Network: Interconnected lines and nodes for a tech-forward look.
Galaxy: A star-field animation that follows your cursor.
Neon: High-contrast glowing cubes that pop on dark backgrounds.
Lava Lamp: Slow, blob-like organic movement for a calm, fluid feel.
Emoji: Replace particles with one or more emojis.
Text: Floating text that moves and reacts like particles.
Presets are a starting point. Every visual and motion property can be customized afterward.
Adjusting Particle Settings
When the Mojave Particles component is selected, all customization options appear in the right-hand properties panel.
Appearance controls:
You can adjust the particle count to change how dense the animation feels.
Use the size range sliders or input fields to control minimum and maximum particle size.
The color palette can be a single tone, a gradient, or linked to your Framer color variables.
Opacity sets how visible the particles are, and speed determines their overall movement intensity.
Behavior controls:
Gravity or drift settings change how particles move vertically.
Repulsion and attraction determine how they respond to your cursor.
Vibration adds gentle, random jitter for more natural motion.
Scroll reactivity lets particles respond to scrolling speed and direction.
Layout controls:
The background color defaults to #000005, matching Mojave’s dark theme.
You can adjust the Z-index to position the particles behind content layers.
Blend mode options like “Screen” or “Normal” let you fine-tune how particles interact visually with the background.
Interactivity Options
Mojave Particles supports built-in interactivity without any code. When hover response is enabled, particles will move or glow as your cursor passes over them. Click response adds expansion or bursts of motion when users click. Scroll awareness lets the animation move, fade, or change as the user scrolls through the page. For immersive pages, try combining hover and scroll reactivity together to create subtle, natural-feeling motion.
Creative Use Cases
Mojave Particles works best in places where motion enhances the experience without distracting from content.
Popular ways to use it include:
Hero sections with slow ambient movement.
Landing pages that react to scrolling or hovering.
Product backgrounds for added depth.
Tech or data-themed pages using the Network or Galaxy styles.
Portfolios that feel interactive and alive.
Small, deliberate motion can make your design feel dynamic while keeping focus on what matters.
Quick Examples
Floating Galaxy Background
Select the Galaxy preset. Set the particle count between 120 and 200. Lower opacity to around 60 or 70 percent, and enable scroll reactivity for smooth parallax-style motion.
Subtle Hero Glow
Choose the Neon preset. Set the count around 50 and use your brand’s primary color with low opacity. Keep scroll reactivity off for a calm, focused header effect.