ZenBrowserMirrors/www
1
0
Fork 0
mirror of https://github.com/zen-browser/www.git synced 2025-07-08 17:30:01 +02:00
Code Issues Projects Releases Packages Wiki Activity

fix: remove viewport settings from motion components for improved performance

Browse source
This commit is contained in:
mr. M 2025-01-03 00:25:43 +01:00
parent dc83c63290
commit 641727c335
No known key found for this signature in database
GPG key ID: CBD57A2AEDBDA1FB
2 changed files with 7 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

12
src/components/Community.astro
View file

@ -15,29 +15,29 @@ import { getTitleAnimation } from '../animations'
class="flex w-full flex-col items-center text-center relative" class="flex w-full flex-col items-center text-center relative"
> >
<Title> <Title>
<motion.span client:load viewport={{ once: true }} {...getTitleAnimation(0.2)}> <motion.span client:load {...getTitleAnimation(0.2)}>
Community Community
</motion.span> </motion.span>
<motion.span client:load viewport={{ once: true }} {...getTitleAnimation(0.4)}> <motion.span client:load {...getTitleAnimation(0.4)}>
Driven Driven
</motion.span> </motion.span>
</Title> </Title>
<motion.p client:load viewport={{ once: true }} {...getTitleAnimation(0.6)} className="px-4 lg:px-0 lg:w-1/2"> <motion.p client:load {...getTitleAnimation(0.6)} className="px-4 lg:px-0 lg:w-1/2">
We are a community-driven project. We listen to our users and build the We are a community-driven project. We listen to our users and build the
features they want. Zen focuses on privacy and customization, not on data collection. features they want. Zen focuses on privacy and customization, not on data collection.
</motion.p> </motion.p>
<div class="mt-6 gap-3 px-4 sm:px-0 w-full sm:gap-10 flex flex-wrap justify-center"> <div class="mt-6 gap-3 px-4 sm:px-0 w-full sm:gap-10 flex flex-wrap justify-center">
<motion.span client:load viewport={{ once: true }} {...getTitleAnimation(0.8)}> <motion.span client:load {...getTitleAnimation(0.8)}>
<Button class:list={['px-4']} href="https://github.com/zen-browser"> <Button class:list={['px-4']} href="https://github.com/zen-browser">
<Github class="size-4" /> <Github class="size-4" />
<span>View on Github</span> <span>View on Github</span>
</Button> </Button>
</motion.span> </motion.span>
<motion.div client:load viewport={{ once: true }} {...getTitleAnimation(1)} className="flex items-center gap-4"> <motion.div client:load {...getTitleAnimation(1)} className="flex items-center gap-4">
<Check class="size-4" /> <Check class="size-4" />
<span>Fully Customizable</span> <span>Fully Customizable</span>
</motion.div> </motion.div>
<motion.div client:load viewport={{ once: true }} {...getTitleAnimation(1.2)} className="flex items-center gap-4"> <motion.div client:load {...getTitleAnimation(1.2)} className="flex items-center gap-4">
<Check class="size-4" /> <Check class="size-4" />
<span>Privacy Focused</span> <span>Privacy Focused</span>
</motion.div> </motion.div>

2
src/components/Features.astro
View file

@ -21,7 +21,7 @@ import { getTitleAnimation, getZoomInAnimation } from '../animations'
> >
<div class="flex flex-col lg:flex-row w-full items-start gap-12"> <div class="flex flex-col lg:flex-row w-full items-start gap-12">
<div id="feature-list" class="lg:w-1/3 flex flex-col gap-4"> <div id="feature-list" class="lg:w-1/3 flex flex-col gap-4">
<motion.span client:load viewport={{ once: true }} {...getTitleAnimation(0.2)}> <motion.span client:load {...getTitleAnimation(0.2)}>
<Title>Features</Title> <Title>Features</Title>
</motion.span> </motion.span>
<motion.div client:load viewport={{ once: true }} {...getZoomInAnimation(0.4)} className="feature flex hover:bg-coral/5 rounded-xl p-4 w-full cursor-pointer"> <motion.div client:load viewport={{ once: true }} {...getZoomInAnimation(0.4)} className="feature flex hover:bg-coral/5 rounded-xl p-4 w-full cursor-pointer">