Document Navigation

Particle effects module

Welcome to the core interactive component of the SX-Creval system. This is a web page effects engine built on cinematic physically based rendering technology (WebGL). With this module, you can instantly transform an ordinary transparent image into a visual spectacle composed of thousands of luminous particles that can realistically interact with the mouse.

This document guides website editors and front-end developers on how to configure and use the "Cool Glowing Particle Effects" module. Powered by WebGL (PixiJS), this module is specifically designed for SX-Creval e-commerce websites, providing a highly technological and impactful visual interactive experience for brand logos, product outlines, or world maps. To enable editors with no coding experience to achieve top-notch effects, we have transformed the complex physics and visual code into a few simple parameter modules in the backend.

Part 1: Backend Parameter Configuration Instructions (For Website Editors)

After you add the "Cool Glowing Particle Effects" module, you will see that the backend is divided into 5 settings areas. Please follow the instructions below to adjust them:

1. Content and layout settings (determines what it looks like and where it's placed)

This is the module's skeleton, which determines the layout relationship between particles and text.

  • Module application scenarios (layout modes) :
    • Fullscreen : The particles occupy the visual center of the entire screen. Ideal for displaying brand logos on the first screen of a webpage, or a full-screen world map.
    • Left text - right particles / Right text - left particles : The screen is divided in two. One side displays your title and introductory text, while the other side features particle effects. Suitable for introducing product advantages or showcasing technical features.

  • Title & Description / Button Group : If you chose a left-right layout, fill in your marketing copy and call-to-action buttons here.

2. Basic and Interaction Settings (Determines how the original image is transformed into particles)

This is the basic shape that controls the particle pattern.

  • Upload a shape image (extremely important) : The system only recognizes PNG or WEBP formats, and the image must have a transparent background (i.e., the background has been removed). Do not upload JPG images with white or black backgrounds, and SVG is not supported. Uploading the wrong image will result in the system forcibly blocking it and preventing it from being saved.

  • Logo screen size : If you think the pattern made up of particles is too small on the screen, increase the default 0.45 (for example, 0.6 or 0.8); if you think it is too big, decrease it (for example, 0.3).

  • Interaction Mode (One of the Ultimate Moves) :
    • Always in particle form : As soon as the webpage opens, it's a bunch of particles, ready to play.
    • Seamless hover over display : When the webpage opens, it looks like a regular high-definition image; the user has no idea there's a special effect. The instant the user hovers the mouse over it, the image suddenly "explodes" into manipulateable particles. This is an extremely sophisticated hidden Easter egg technique.

  • Use native color / alternate glow color : If you check the native color option, the particles will retain the original colors of your image; if you do not check the option, all particles will be uniformly changed to the "alternate glow color" that you enter below (for example, you can enter a tech blue #00ffcc that represents your company).

  • Entrance Animation Effects & Speed : How the particles assemble when the customer scrolls through the webpage and first sees this area. Selecting "Starlight Convergence" means the particles fly in from all directions and assemble; selecting "Big Bang" means they explode from the center and then converge. The larger the number, the faster they fly.

3. Visual and rendering settings (determine the "luxury" and "texture" of the image)

This determines whether the particles look like "rough mosaic" or "expensive quicksand".

  • [Core] Particle Entity Size : Controls the core size of each tiny dot. It is recommended to keep it between 1.0 and 2.0. The smaller the value, the more delicate the pattern and the more sophisticated the fine sand texture.
  • [Glow] Halo Diffusion Factor : This is key to brightening the image! If you feel the image isn't bright enough, don't increase the entity size; instead, increase this halo factor (3.0 - 6.0 recommended). This will make each particle emit a neon-like halo.
  • HDR Neon Color Enhancement : This is a smart switch. If your original image has dull and lifeless colors, turn it on, and the system will automatically calculate a high-saturation version of the original image's colors, instantly transforming it into a cyberpunk-style glowing object.
  • Pixel sampling density (performance lifeline) : This is the most important parameter! It determines how many particles the system generates.
    • The standard value is 4 : the best balance between image quality and performance.
    • The smaller the value (e.g., 3): the particles are extremely dense, the image quality is amazing, but it may cause lag on computers with poor configurations.
    • The higher the value (e.g., 5 or 6), the sparser the particles become, creating a pixelated look and very smooth scrolling. If you experience page scrolling lag, be sure to increase this number.

4. Static Vitality Settings (allowing web pages to "breathe" even when stationary)

Even when the mouse is not touched, the particles have their own life force.

  • Floating amplitude : This gives the illusion that the pattern is slightly moving underwater. 0 means it is completely still, while 0.5 means it is slightly twisting in place.
  • Starlight Flicker Intensity & Frequency : Controls the flickering of particles. When increased, the entire graphic will produce a slight electrical flicker and breathing effect, like a holographic projection in a science fiction movie.

5. Physics and Dynamics Settings (determine the "feel" of touching the mouse)

  • Mouse radius and repulsive force : These determine the size of your mouse's "magnetic field." The larger the radius, the greater the repulsive force; when the mouse gets close, particles will be violently pushed away.
  • Return spring force & friction damping : These determine how the pushed-away particles bounce back. A damping setting of 0.7 results in a very crisp and bouncy rebound; a damping setting of 0.9 causes the particles to slowly drift back, as if swimming in a thick liquid.
  • Enable Physics Motion Blur : Highly recommended. As particles disperse at high speeds, they leave afterimage beams, greatly enhancing explosive power!
  • Enable Holographic 3D Parallax : When enabled, as the user moves the mouse up, down, left, or right on the screen, the entire particle matrix will tilt in 3D space, maximizing the sense of spatial depth.

Part Two: How to Unleash the True Power of This Feature? (Creativity and Practice)

Understanding the parameters above gives you access to the visual magic of the SX-Creval system. The power of this feature lies in its ability to handle not only logos but also any transparent background. Below are some creative ideas you can immediately implement:

Idea 1: Showcase "hardcore and precise" technical capabilities to clients.

  • Use case : Product detail page for flagship products.
  • Creative Configuration :
    • Find a cutout PNG image of your company's core product (such as a bearing, a precision mechanical valve, a complex circuit board, or an automated device).
    • Interaction mode selection: hover seamless rendering .
    • Visual settings: Enable HDR Neon Brightening, and adjust the Halo Multiplier to 4.0.
    • Physical settings: Reduce repulsive force and adjust friction damping to 0.9.

  • The power it generates : When customers swipe here, they see a high-definition product image. When they move their mouse over the product out of curiosity, this solid industrial device instantly transforms into tens of thousands of shimmering, precise particles, like quicksand. After the mouse leaves, these particles slowly flow and recombine back into the device.

Idea 2: Establish a global narrative

  • Use case : The "About Us" or "Global Network" section of a website.
  • Creative Configuration :
    • Upload a transparent PNG image of a world map (preferably with a cutout).
    • Layout mode selection: Full screen or left text, right particles.
    • Turn off "Use native color" and fill in the alternative glow color with either a futuristic fluorescent green or radar blue.
    • Static setting: Significantly increase the "starlight flicker intensity" to create a breathing effect.

  • The resulting impact : The entire world map will be transformed into a dynamic holographic projection similar to a military-grade radar, combined with 3D parallax tilt, giving overseas buyers the visual impression of your company as a "large-scale, digitally managed, and globally operating multinational corporation."

Idea 3: Turn slogans into interactive visual art (fluid typography)

  • Use cases : Slogan area on the website homepage, or corporate vision module.
  • Creative Configuration :
    • Have the designer format the company's core English slogan (such as "PRECISION ENGINEERING") and save it as a transparent PNG image.
    • Entrance animation selection: Starlight Gathering.
    • Visual settings: Set particle entity size to the minimum of 1.0, and density to 3 or 4.
  • The power it generates : Abandoning traditional, tedious text! As the webpage loads, countless bright specks of light rapidly assemble into this slogan at the center of the screen. The user's mouse can glide across the slogan like across water, creating ripples in the text – a high-end interactive experience akin to a luxury item.

Part Three: Underlying Architecture Description

This module's design not only pursues the ultimate visual effects, but also achieves a deep balance between performance consumption and code architecture:

  1. Crash-resistant data validation based on Wagtail :
    To ensure that front-end WebGL parsing doesn't cause memory overflow or black screens due to incorrect image channels, we standardized image formats on the backend, precisely blocking non-PNG/WEBP formats, and accurately appended red error messages below the image upload field in the backend, achieving absolute cleanliness of the data source. (This is to avoid performance degradation caused by uploading extremely large JPGs.)
  2. Alpine.js lifecycle and memory management :
    The frontend uses Alpine.js's x-data to build a sandbox scope, receiving configurations passed from Django templates. By using `@destroy.window="cleanup"`, PixiJS's `app.destroy()` is strictly executed when the HTML page is not refreshed or when a component is destroyed, releasing the WebGL context and completely eliminating memory leaks.
  3. Sleep mechanism based on IntersectionObserver :
    The GPU-intensive particle ticker loop doesn't run continuously. We set a viewport cross-observer threshold of 0.55. The computation engine only starts when this module is more than 55% exposed within the browser's visible area; once it slides off-screen, the engine immediately suspends, handing over GPU resources to other processes in the operating system.
  4. Adaptive degradation compensation strategy for mobile devices :
    The engine has built-in automatic degradation logic for mobile devices (innerWidth <= 768).
    • Automatically disables high-consumption mouse 3D matrix parallax transformation to prevent interference with normal up and down scrolling on mobile devices.
    • Automatically scales the main imageScale by up to 1.5 times to prevent the logo from appearing too small in portrait mode.
    • It automatically and proportionally reduces the physical repulsion radius to prevent small mobile screens from being unable to contain scattered particles. The entire adaptation process does not require operators to configure two sets of data in the background.
  1. Shader alternatives for native Canvas :
    To reduce HTTP requests to external resources, no additional glow maps were introduced within the module. Instead, a 256x256 five-layer gradient map was drawn in real time using the native Canvas 2D API. By combining reasonable transparency gradient calculations with PIXI's blendMode: 'add', HDR-level high-brightness bloom rendering was achieved with extremely low performance overhead.