glyphdiff.com/frontend-svelte
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(FontApplicator): add system fonts and change animation

Browse Source
This commit is contained in:
Ilia Mashkov
2026-02-10 10:12:58 +03:00
parent 422363d329
commit d006c662a9
1 changed files with 9 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/entities/Font/ui/FontApplicator/FontApplicator.svelte
View File

@@ -20,13 +20,15 @@ interface Props {
* Font id to load * Font id to load
*/ */
id: string; id: string;
/** */
url: string; url: string;
/** /**
* Font weight * Font weight
*/ */
weight?: number; weight?: number;
/**
* Variable font flag
*/
isVariable?: boolean; isVariable?: boolean;
/** /**
* Additional classes * Additional classes
@@ -75,25 +77,25 @@ $effect(() => {
}); });
// The "Show" condition: Element is in view AND (Font is ready OR it errored out) // The "Show" condition: Element is in view AND (Font is ready OR it errored out)
const shouldReveal = $derived(hasEnteredViewport && (status === 'loaded' || status === 'error')); const shouldReveal = $derived(hasEnteredViewport && (status === 'loaded'));
const transitionClasses = $derived( const transitionClasses = $derived(
prefersReducedMotion.current prefersReducedMotion.current
? 'transition-none' // Disable CSS transitions if motion is reduced ? 'transition-none' // Disable CSS transitions if motion is reduced
: 'transition-all duration-700 ease-[cubic-bezier(0.22,1,0.36,1)]', : 'transition-all duration-300 ease-[cubic-bezier(0.22,1,0.36,1)]',
); );
</script> </script>
<div <div
bind:this={element} bind:this={element}
style:font-family={shouldReveal ? `'${name}'` : 'sans-serif'} style:font-family={shouldReveal ? `'${name}'` : 'system-ui, -apple-system, sans-serif'}
class={cn( class={cn(
transitionClasses, transitionClasses,
// If reduced motion is on, we skip the transform/blur entirely // If reduced motion is on, we skip the transform/blur entirely
!shouldReveal && !prefersReducedMotion.current !shouldReveal && !prefersReducedMotion.current
&& 'opacity-0 translate-y-8 scale-[0.98] blur-sm', && 'opacity-50 scale-[0.95] blur-sm',
!shouldReveal && prefersReducedMotion.current && 'opacity-0', // Still hide until font is ready, but no movement !shouldReveal && prefersReducedMotion.current && 'opacity-0', // Still hide until font is ready, but no movement
shouldReveal && 'opacity-100 translate-y-0 scale-100 blur-0', shouldReveal && 'opacity-100 scale-100 blur-0',
className, className,
)} )}
> >