dioxus-hoverfx

Dioxus components and native metadata for worker-first cursor hover effects.

This crate is part of the Dioxus SSR package workspace. The APIs are pre-1.0 and may change between releases while the package family stabilizes.

Release Status

Current crate version: 0.1.0-alpha.4.
Release wave: June 8, 2026 workspace integration update.
Publish status: Prepared as a crates.io update for this package.
Scope: Dioxus components and native metadata for worker-first cursor hover effects.
The README install examples and local workspace dependency requirements are aligned with this publish wave.

Install

[dependencies]
dioxus-hoverfx = "0.1.0-alpha.4"

What It Provides

HoverFxProvider, HoverFxTarget, and HoverFxCard components.
SSR-safe controls for radius, shape, falloff, and strength.
Native package action metadata for init, refresh, and control updates.
Re-exports for dioxus-hoverfx-core config, registry, presets, shapes, falloff, renderer, and helpers.

Targets

use dioxus::prelude::*;
use dioxus_hoverfx::{
    HoverFxCard, HoverFxFalloff, HoverFxPreset, HoverFxProvider, HoverFxShape, HoverFxTarget,
};

#[component]
fn HoverFxDemo() -> Element {
    rsx! {
        HoverFxProvider { class: "hoverfx-grid",
            HoverFxCard {
                preset: HoverFxPreset::Spotlight,
                radius: 320,
                shape: HoverFxShape::Circle,
                falloff: HoverFxFalloff::Smooth,
                strength: 1.2,
                class: "demo-card",
                "Spotlight card"
            }

            HoverFxTarget {
                effect: "brand-glow",
                radius: 420,
                shape: HoverFxShape::RoundedRect,
                falloff: HoverFxFalloff::Exponential,
                class: "demo-card custom-hoverfx",
                "Custom CSS/Rust effect target"
            }
        }
    }
}

Tagged targets emit data-dxh-effect and optional override attributes for radius, shape, falloff, and strength. The runtime can activate effects when the cursor is near the target, not only after the pointer enters the element.

Controls

use dioxus::prelude::*;
use dioxus_hoverfx::{
    HoverFxFalloffSelect, HoverFxRadiusSlider, HoverFxShapeSelect, HoverFxStrengthSlider,
};

#[component]
fn HoverFxControls() -> Element {
    rsx! {
        div { class: "hoverfx-controls",
            HoverFxRadiusSlider { value: 280, apply_to_all: true }
            HoverFxShapeSelect { apply_to_all: true }
            HoverFxFalloffSelect { apply_to_all: true }
            HoverFxStrengthSlider { value: 100, apply_to_all: true }
        }
    }
}

Controls render SSR-safe HTML using resumability attributes:

data-dxr-on-input="hoverfx.radius"
data-dxr-on-change="hoverfx.shape"
data-dxr-on-change="hoverfx.falloff"
data-dxr-on-input="hoverfx.strength"

Each control includes stable generated ids, accessible labels, and aria-live output/current-value text.

By default, control updates preserve per-target radius, shape, falloff, and strength attributes. Set apply_to_all: true to emit data-dxh-apply-to="all" and make a lab control override every target on the page, including targets with their own preset defaults.

Native Metadata

Use hoverfx_native_package_actions(route) to advertise native-port actions for non-web shells. hoverfx_native_action returns the configured handler id and fallback mode so native hosts can mirror the same controls.

Integration Recipes

The component prelude includes the core integration helpers, so UI crates can attach route metadata next to the component config:

use dioxus_hoverfx::prelude::*;

let config = hoverfx().with_default_effect(HoverFxPreset::Sheen.as_attr());
let policy = hoverfx_route_policy().route("/cards");
let manifest = hoverfx_component_manifest(&config, &policy);
let offload = hoverfx_workertown_offload_plan(&config, &policy);

assert_eq!(manifest.package, "dioxus-hoverfx");
assert!(offload.serializable);

Prefer the hoverfx_* names for new integrations. The shorter aliases such as HoverCfg, HoverDef, and hover_fx remain available for component-heavy code, but route manifests, cache keys, and Strata migration helpers use the long package-prefixed names.

Workspace package dependencies:

dioxus-hoverfx-core
dioxus-native-port

Feature Flags

default: web
desktop: dioxus/desktop
native: dioxus/native, dioxus-native-port/native
server: dioxus/server
web: dioxus/web, dioxus-native-port/web

License

Licensed under either of:

MIT license (LICENSE-MIT)
Apache License, Version 2.0 (LICENSE-APACHE)

Repository: https://github.com/Collin-Budrick/dioxus_template

dioxus-hoverfx 0.1.0-alpha.4