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.

Install

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

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.

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.3