Sticky Cursor Links
Rust UI component that displays a sticky cursor links.
use leptos::prelude::*;
use crate::components::extensions::sticky_cursor_links::{StickyLink, StickyLinksNav};
#[component]
pub fn DemoStickyCursorLinks() -> impl IntoView {
view! {
<div class="flex justify-center items-center w-full h-[500px]">
<StickyLinksNav class="px-4 py-10">
<StickyLink text="Rust" />
<StickyLink text="is" />
<StickyLink text="Great" />
</StickyLinksNav>
</div>
<script src="/components/sticky_cursor_links.js" />
}
}
Installation
You can run either of the following commands:
# cargo install ui-cli --forceui add demo_sticky_cursor_linksui add sticky_cursor_linksUpdate the imports to match your project setup.
Copy and paste the following code into your project:
components/ui/sticky_cursor_links.rs
use leptos::prelude::*;
use leptos_ui::{a, clx, div};
const TARGET_LINK: &str = "link";
mod components {
use super::*;
clx! {RootNav, nav, "flex flex-col gap-4 lg:gap-8 mx-auto w-full text-center lg:flex-row group cursor-none"}
a! {RootLink, "transition-all duration-300 ease-in-out", TARGET_LINK}
clx! {StickyText, span, "inline-block my-2 text-3xl font-bold tracking-wide uppercase pointer-events-none"}
div! {StickyCursor, "hidden fixed bg-white rounded-full transition-transform duration-300 ease-linear pointer-events-none group-hover:block mix-blend-difference p-[0.3rem] cursor"}
}
pub use components::*;
/*´:°•.°+.*•´.*:˚.°*.˚•´.°:°•.°•.*•´.*:˚.°*.˚•´.°:°•.°+.*•´.*:*/
/* ✨ FUNCTIONS ✨ */
/*.•°:°.´+˚.*°.˚:*.´•*.+°.•°:´*.´•*.•°.•°:°.´:•˚°.*°.˚:*.´+°.•*/
#[component]
pub fn StickyLinksNav(
#[prop(into, optional)] class: Signal<String>,
children: Children,
) -> impl IntoView {
view! {
<RootNav class=class>
<style>
{".link span {
transition: transform 0.1s linear;
}
.link:hover ~ .cursor {
transform:translate(-50%, -50%) scale(8);
}
"}
</style>
{children()}
<StickyCursor />
</RootNav>
}
}
#[component]
pub fn StickyLink(text: &'static str) -> impl IntoView {
view! {
<RootLink href="#">
<StickyText>{text}</StickyText>
</RootLink>
}
}
Update the imports to match your project setup.
Usage
// Coming soon 🦀