use leptos::prelude::*;
use crate::components::extensions::beam_border::{BeamBorder, BeamBorderImage, BeamBorderLine};
/*´:°•.°+.*•´.*:˚.°*.˚•´.°:°•.°•.*•´.*:˚.°*.˚•´.°:°•.°+.*•´.*:*/
/* ✨ FUNCTIONS ✨ */
/*.•°:°.´+˚.*°.˚:*.´•*.+°.•°:´*.´•*.•°.•°:°.´:•˚°.*°.˚:*.´+°.•*/
#[component]
pub fn DemoBeamBorder() -> impl IntoView {
const IMG_DARK: &str = "/images/dashboard-dark.webp";
const IMG_LIGHT: &str = "/images/dashboard-light.webp";
view! {
<style>
r#"@keyframes after_beam_border {
100% { offset-distance: 100%; }
}
.after\:animate-after_beam_border::after {
animation: after_beam_border calc(var(--duration)*1s) infinite linear;
}"#
</style>
<BeamBorder>
<BeamBorderImage src=IMG_DARK class="hidden dark:block w-[700px]" />
<BeamBorderImage src=IMG_LIGHT class="block dark:hidden w-[700px]" />
<BeamBorderLine />
</BeamBorder>
}
}
Installation
You can run either of the following commands:
# cargo install ui-cli --forceui add demo_beam_borderui add beam_borderUpdate the imports to match your project setup.
Copy and paste the following code into your project:
components/ui/beam_border.rs
use leptos::prelude::*;
use leptos_ui::{clx, img};
use tw_merge::*;
use crate::components::ui::_animations::ANIMATIONS;
mod components {
use super::*;
clx! {BeamBorder, div, "relative rounded-xl w-fit"}
img! {BeamBorderImage, "object-contain border shadow-lg rounded-[inherit]"}
}
pub use components::*;
/*´:°•.°+.*•´.*:˚.°*.˚•´.°:°•.°•.*•´.*:˚.°*.˚•´.°:°•.°+.*•´.*:*/
/* ✨ FUNCTIONS ✨ */
/*.•°:°.´+˚.*°.˚:*.´•*.+°.•°:´*.´•*.•°.•°:°.´:•˚°.*°.˚:*.´+°.•*/
//
// TODO CLX. Styles, no children.
#[component]
pub fn BeamBorderLine(#[prop(into, optional)] class: Signal<String>) -> impl IntoView {
let class = Memo::new(move |_| {
tw_merge!(
ANIMATIONS::AFTER_BEAM_BORDER,
"absolute inset-[0] rounded-[inherit]",
"[border:calc(var(--border-width)*1px)_solid_transparent] ![mask-clip:padding-box,border-box] ![mask-composite:intersect] [mask:linear-gradient(transparent,transparent),linear-gradient(white,white)]",
"after:absolute after:aspect-square after:w-[calc(var(--size)*1px)] after:[animation-delay:var(--delay)] after:[background:linear-gradient(to_left,var(--color-from),var(--color-to),transparent)] after:[offset-anchor:calc(var(--anchor)*1%)_50%] after:[offset-path:rect(0_auto_auto_0_round_calc(var(--size)*1px))]",
class()
)
});
view! {
<div
class=class
style="--size:250;--duration:12;--anchor:90;--border-width:1.5;--color-from:#ffaa40;--color-to:#9c40ff;--delay:-9s"
/>
}
}
Update the imports to match your project setup.
Usage
// Coming soon 🦀