go/sonr
go/sonr
1
1
Fork 0
mirror of https://github.com/onsonr/sonr.git synced 2025-03-10 13:07:09 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: add counter animation to hero section

Browse Source
This commit is contained in:
Prad Nukala 2024-09-29 21:42:46 -04:00
parent e764cce90a
commit 9fcdfe5243
4 changed files with 169 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
pkg/nebula/components/blocks/layout.templ
View File

@ -39,7 +39,11 @@ templ LayoutNoBody(title string, remote bool) {
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
</head> </head>
<main class="grow"> <main class="grow">
{ children... } <body class="font-inter antialiased bg-white text-zinc-900 tracking-tight">
<div class="flex flex-col min-h-screen overflow-hidden supports-[overflow:clip]:overflow-clip">
{ children... }
</div>
</body>
</main> </main>
</html> </html>
} }

4
pkg/nebula/components/blocks/layout_templ.go
View File

@ -124,7 +124,7 @@ func LayoutNoBody(title string, remote bool) templ.Component {
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</title><!-- Sets the status bar style to transparent --><meta name=\"apple-mobile-web-app-capable\" content=\"yes\"><meta name=\"apple-mobile-web-app-status-bar-style\" content=\"black-translucent\"></head><main class=\"grow\">") _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</title><!-- Sets the status bar style to transparent --><meta name=\"apple-mobile-web-app-capable\" content=\"yes\"><meta name=\"apple-mobile-web-app-status-bar-style\" content=\"black-translucent\"></head><main class=\"grow\"><body class=\"font-inter antialiased bg-white text-zinc-900 tracking-tight\"><div class=\"flex flex-col min-h-screen overflow-hidden supports-[overflow:clip]:overflow-clip\">")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
@ -132,7 +132,7 @@ func LayoutNoBody(title string, remote bool) templ.Component {
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</main></html>") _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div></body></main></html>")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }

69
pkg/nebula/components/sections/hero.templ
View File

@ -44,41 +44,50 @@ templ SectionHero(hero Hero) {
</div> </div>
</div> </div>
</div> </div>
</div> @heroImage()
<!-- Image --> @stats()
<div class="max-w-5xl mx-auto px-4 sm:px-6 flex justify-center pb-12 md:pb-20 relative before:absolute before:-top-12 before:w-96 before:h-96 before:bg-zinc-900 before:opacity-[.15] before:rounded-full before:blur-3xl before:-z-10">
<img class="rounded-lg shadow-2xl" src="https://cdn.sonr.id/img/hero-portrait.png" width="700" height="700" alt="Hero"/>
</div>
<!-- Stats -->
<div class="max-w-5xl mx-auto px-4 sm:px-6">
<div class="max-w-sm mx-auto grid gap-12 sm:grid-cols-2 md:grid-cols-4 md:-mx-5 md:gap-0 items-start md:max-w-none">
<!-- 1st item -->
<div class="relative text-center md:px-5 after:hidden md:after:block after:absolute after:right-0 after:top-1/2 after:-translate-y-1/2 after:w-px after:h-8 after:border-l after:border-zinc-300 after:border-dashed last:after:hidden">
<h4 class="font-inter-tight text-2xl md:text-3xl font-bold tabular-nums mb-2"><span x-data="counter(476)" x-text="counterValue">0</span>K</h4>
<p class="text-sm text-zinc-500">Assets packed with power beyond your imagination.</p>
</div>
<!-- 2nd item -->
<div class="relative text-center md:px-5 after:hidden md:after:block after:absolute after:right-0 after:top-1/2 after:-translate-y-1/2 after:w-px after:h-8 after:border-l after:border-zinc-300 after:border-dashed last:after:hidden">
<h4 class="font-inter-tight text-2xl md:text-3xl font-bold tabular-nums mb-2"><span x-data="counter(1.44)" x-text="counterValue">0</span>K</h4>
<p class="text-sm text-zinc-500">Assets packed with power beyond your imagination.</p>
</div>
<!-- 3rd item -->
<div class="relative text-center md:px-5 after:hidden md:after:block after:absolute after:right-0 after:top-1/2 after:-translate-y-1/2 after:w-px after:h-8 after:border-l after:border-zinc-300 after:border-dashed last:after:hidden">
<h4 class="font-inter-tight text-2xl md:text-3xl font-bold tabular-nums mb-2"><span x-data="counter(1.5)" x-text="counterValue">0</span>M+</h4>
<p class="text-sm text-zinc-500">Assets packed with power beyond your imagination.</p>
</div>
<!-- 4th item -->
<div class="relative text-center md:px-5 after:hidden md:after:block after:absolute after:right-0 after:top-1/2 after:-translate-y-1/2 after:w-px after:h-8 after:border-l after:border-zinc-300 after:border-dashed last:after:hidden">
<h4 class="font-inter-tight text-2xl md:text-3xl font-bold tabular-nums mb-2"><span x-data="counter(192)" x-text="counterValue">0</span>K</h4>
<p class="text-sm text-zinc-500">Assets packed with power beyond your imagination.</p>
</div>
</div>
@counterAnimation()
</div> </div>
</div> </div>
</section> </section>
} }
templ heroImage() {
<!-- Image -->
<div class="max-w-5xl mx-auto px-4 sm:px-6 flex justify-center pb-12 md:pb-20 relative before:absolute before:-top-12 before:w-96 before:h-96 before:bg-zinc-900 before:opacity-[.15] before:rounded-full before:blur-3xl before:-z-10">
<img
class="rounded-lg"
src="https://cdn.sonr.id/img/hero-clipped.svg"
width="560"
height="560"
alt="Hero"
/>
</div>
}
templ stats() {
<!-- Stats -->
<div class="max-w-4xl mx-auto px-4 sm:px-6 justify-center items-center">
<div class="max-w-sm mx-auto grid gap-12 sm:grid-cols-2 md:grid-cols-4 md:-mx-5 md:gap-0 items-end md:max-w-none">
<!-- 1st item -->
<div class="relative text-center md:px-5 after:hidden md:after:block after:absolute after:right-0 after:top-1/2 after:-translate-y-1/2 after:w-px after:h-8 after:border-l after:border-zinc-300 after:border-dashed last:after:hidden">
<h4 class="font-inter-tight text-2xl md:text-3xl font-bold tabular-nums mb-2"><span x-data="counter(476)" x-text="counterValue">0</span>K</h4>
<p class="text-sm text-zinc-500">Assets packed with power beyond your imagination.</p>
</div>
<!-- 2nd item -->
<div class="relative text-center md:px-5 after:hidden md:after:block after:absolute after:right-0 after:top-1/2 after:-translate-y-1/2 after:w-px after:h-8 after:border-l after:border-zinc-300 after:border-dashed last:after:hidden">
<h4 class="font-inter-tight text-2xl md:text-3xl font-bold tabular-nums mb-2"><span x-data="counter(1.44)" x-text="counterValue">0</span>K</h4>
<p class="text-sm text-zinc-500">Assets packed with power beyond your imagination.</p>
</div>
<!-- 3rd item -->
<div class="relative text-center md:px-5 after:hidden md:after:block after:absolute after:right-0 after:top-1/2 after:-translate-y-1/2 after:w-px after:h-8 after:border-l after:border-zinc-300 after:border-dashed last:after:hidden">
<h4 class="font-inter-tight text-2xl md:text-3xl font-bold tabular-nums mb-2"><span x-data="counter(1.5)" x-text="counterValue">0</span>M+</h4>
<p class="text-sm text-zinc-500">Assets packed with power beyond your imagination.</p>
</div>
</div>
@counterAnimation()
</div>
}
script counterAnimation() { script counterAnimation() {
document.addEventListener('alpine:init', () => { document.addEventListener('alpine:init', () => {
Alpine.data('counter', (target = 0, duration = 3000) => ({ Alpine.data('counter', (target = 0, duration = 3000) => ({

176
pkg/nebula/components/sections/hero_templ.go
View File

@ -138,11 +138,15 @@ func SectionHero(hero Hero) templ.Component {
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</a></div></div></div></div></div><!-- Image --><div class=\"max-w-5xl mx-auto px-4 sm:px-6 flex justify-center pb-12 md:pb-20 relative before:absolute before:-top-12 before:w-96 before:h-96 before:bg-zinc-900 before:opacity-[.15] before:rounded-full before:blur-3xl before:-z-10\"><img class=\"rounded-lg shadow-2xl\" src=\"https://cdn.sonr.id/img/hero-portrait.png\" width=\"700\" height=\"700\" alt=\"Hero\"></div><!-- Stats --><div class=\"max-w-5xl mx-auto px-4 sm:px-6\"><div class=\"max-w-sm mx-auto grid gap-12 sm:grid-cols-2 md:grid-cols-4 md:-mx-5 md:gap-0 items-start md:max-w-none\"><!-- 1st item --><div class=\"relative text-center md:px-5 after:hidden md:after:block after:absolute after:right-0 after:top-1/2 after:-translate-y-1/2 after:w-px after:h-8 after:border-l after:border-zinc-300 after:border-dashed last:after:hidden\"><h4 class=\"font-inter-tight text-2xl md:text-3xl font-bold tabular-nums mb-2\"><span x-data=\"counter(476)\" x-text=\"counterValue\">0</span>K</h4><p class=\"text-sm text-zinc-500\">Assets packed with power beyond your imagination.</p></div><!-- 2nd item --><div class=\"relative text-center md:px-5 after:hidden md:after:block after:absolute after:right-0 after:top-1/2 after:-translate-y-1/2 after:w-px after:h-8 after:border-l after:border-zinc-300 after:border-dashed last:after:hidden\"><h4 class=\"font-inter-tight text-2xl md:text-3xl font-bold tabular-nums mb-2\"><span x-data=\"counter(1.44)\" x-text=\"counterValue\">0</span>K</h4><p class=\"text-sm text-zinc-500\">Assets packed with power beyond your imagination.</p></div><!-- 3rd item --><div class=\"relative text-center md:px-5 after:hidden md:after:block after:absolute after:right-0 after:top-1/2 after:-translate-y-1/2 after:w-px after:h-8 after:border-l after:border-zinc-300 after:border-dashed last:after:hidden\"><h4 class=\"font-inter-tight text-2xl md:text-3xl font-bold tabular-nums mb-2\"><span x-data=\"counter(1.5)\" x-text=\"counterValue\">0</span>M+</h4><p class=\"text-sm text-zinc-500\">Assets packed with power beyond your imagination.</p></div><!-- 4th item --><div class=\"relative text-center md:px-5 after:hidden md:after:block after:absolute after:right-0 after:top-1/2 after:-translate-y-1/2 after:w-px after:h-8 after:border-l after:border-zinc-300 after:border-dashed last:after:hidden\"><h4 class=\"font-inter-tight text-2xl md:text-3xl font-bold tabular-nums mb-2\"><span x-data=\"counter(192)\" x-text=\"counterValue\">0</span>K</h4><p class=\"text-sm text-zinc-500\">Assets packed with power beyond your imagination.</p></div></div>") _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</a></div></div></div></div>")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
templ_7745c5c3_Err = counterAnimation().Render(ctx, templ_7745c5c3_Buffer) templ_7745c5c3_Err = heroImage().Render(ctx, templ_7745c5c3_Buffer)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = stats().Render(ctx, templ_7745c5c3_Buffer)
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
@ -154,60 +158,126 @@ func SectionHero(hero Hero) templ.Component {
}) })
} }
func heroImage() templ.Component {
return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
return templ_7745c5c3_CtxErr
}
templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
if !templ_7745c5c3_IsBuffer {
defer func() {
templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
if templ_7745c5c3_Err == nil {
templ_7745c5c3_Err = templ_7745c5c3_BufErr
}
}()
}
ctx = templ.InitializeContext(ctx)
templ_7745c5c3_Var10 := templ.GetChildren(ctx)
if templ_7745c5c3_Var10 == nil {
templ_7745c5c3_Var10 = templ.NopComponent
}
ctx = templ.ClearChildren(ctx)
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<!-- Image --><div class=\"max-w-5xl mx-auto px-4 sm:px-6 flex justify-center pb-12 md:pb-20 relative before:absolute before:-top-12 before:w-96 before:h-96 before:bg-zinc-900 before:opacity-[.15] before:rounded-full before:blur-3xl before:-z-10\"><img class=\"rounded-lg\" src=\"https://cdn.sonr.id/img/hero-clipped.svg\" width=\"560\" height=\"560\" alt=\"Hero\"></div>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
return templ_7745c5c3_Err
})
}
func stats() templ.Component {
return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
return templ_7745c5c3_CtxErr
}
templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
if !templ_7745c5c3_IsBuffer {
defer func() {
templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
if templ_7745c5c3_Err == nil {
templ_7745c5c3_Err = templ_7745c5c3_BufErr
}
}()
}
ctx = templ.InitializeContext(ctx)
templ_7745c5c3_Var11 := templ.GetChildren(ctx)
if templ_7745c5c3_Var11 == nil {
templ_7745c5c3_Var11 = templ.NopComponent
}
ctx = templ.ClearChildren(ctx)
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<!-- Stats --><div class=\"max-w-4xl mx-auto px-4 sm:px-6 justify-center items-center\"><div class=\"max-w-sm mx-auto grid gap-12 sm:grid-cols-2 md:grid-cols-4 md:-mx-5 md:gap-0 items-end md:max-w-none\"><!-- 1st item --><div class=\"relative text-center md:px-5 after:hidden md:after:block after:absolute after:right-0 after:top-1/2 after:-translate-y-1/2 after:w-px after:h-8 after:border-l after:border-zinc-300 after:border-dashed last:after:hidden\"><h4 class=\"font-inter-tight text-2xl md:text-3xl font-bold tabular-nums mb-2\"><span x-data=\"counter(476)\" x-text=\"counterValue\">0</span>K</h4><p class=\"text-sm text-zinc-500\">Assets packed with power beyond your imagination.</p></div><!-- 2nd item --><div class=\"relative text-center md:px-5 after:hidden md:after:block after:absolute after:right-0 after:top-1/2 after:-translate-y-1/2 after:w-px after:h-8 after:border-l after:border-zinc-300 after:border-dashed last:after:hidden\"><h4 class=\"font-inter-tight text-2xl md:text-3xl font-bold tabular-nums mb-2\"><span x-data=\"counter(1.44)\" x-text=\"counterValue\">0</span>K</h4><p class=\"text-sm text-zinc-500\">Assets packed with power beyond your imagination.</p></div><!-- 3rd item --><div class=\"relative text-center md:px-5 after:hidden md:after:block after:absolute after:right-0 after:top-1/2 after:-translate-y-1/2 after:w-px after:h-8 after:border-l after:border-zinc-300 after:border-dashed last:after:hidden\"><h4 class=\"font-inter-tight text-2xl md:text-3xl font-bold tabular-nums mb-2\"><span x-data=\"counter(1.5)\" x-text=\"counterValue\">0</span>M+</h4><p class=\"text-sm text-zinc-500\">Assets packed with power beyond your imagination.</p></div></div>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = counterAnimation().Render(ctx, templ_7745c5c3_Buffer)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
return templ_7745c5c3_Err
})
}
func counterAnimation() templ.ComponentScript { func counterAnimation() templ.ComponentScript {
return templ.ComponentScript{ return templ.ComponentScript{
Name: `__templ_counterAnimation_57a0`, Name: `__templ_counterAnimation_524d`,
Function: `function __templ_counterAnimation_57a0(){document.addEventListener('alpine:init', () => { Function: `function __templ_counterAnimation_524d(){document.addEventListener('alpine:init', () => {
Alpine.data('counter', (target = 0, duration = 3000) => ({ Alpine.data('counter', (target = 0, duration = 3000) => ({
startTimestamp: null, startTimestamp: null,
step: null, step: null,
rawValue: 0, rawValue: 0,
counterValue: 0, counterValue: 0,
target: target, target: target,
precision: (target % 1 === 0) ? 0 : (target.toString().split('.')[1] || []).length, precision: (target % 1 === 0) ? 0 : (target.toString().split('.')[1] || []).length,
animationRequestId: null, animationRequestId: null,
animationCompleted: false, animationCompleted: false,
observer: null, observer: null,
init() { init() {
// Intersection observer to watch visibility // Intersection observer to watch visibility
this.observer = new IntersectionObserver(entries => { this.observer = new IntersectionObserver(entries => {
entries.forEach(entry => { entries.forEach(entry => {
// Check if element is in view // Check if element is in view
if (entry.isIntersecting && !this.animationCompleted) { if (entry.isIntersecting && !this.animationCompleted) {
this.startAnimation() this.startAnimation()
} }
}) })
}) })
this.observer.observe(this.$el) this.observer.observe(this.$el)
}, },
startAnimation() { startAnimation() {
this.step = (timestamp) => { this.step = (timestamp) => {
if (!this.startTimestamp) this.startTimestamp = timestamp if (!this.startTimestamp) this.startTimestamp = timestamp
const progress = Math.min((timestamp - this.startTimestamp) / duration, 1) const progress = Math.min((timestamp - this.startTimestamp) / duration, 1)
const easedProgress = this.easeOut(progress) const easedProgress = this.easeOut(progress)
this.rawValue = parseFloat((easedProgress * this.target).toFixed(this.precision)) this.rawValue = parseFloat((easedProgress * this.target).toFixed(this.precision))
this.counterValue = this.rawValue.toFixed(this.precision) this.counterValue = this.rawValue.toFixed(this.precision)
if (progress < 1) { if (progress < 1) {
this.animationRequestId = window.requestAnimationFrame(this.step) this.animationRequestId = window.requestAnimationFrame(this.step)
} else { } else {
this.animationCompleted = true this.animationCompleted = true
} }
} }
this.animationRequestId = window.requestAnimationFrame(this.step); this.animationRequestId = window.requestAnimationFrame(this.step);
}, },
easeOut(t) { easeOut(t) {
return 1 - Math.pow(1 - t, 5) return 1 - Math.pow(1 - t, 5)
}, },
destroy() { destroy() {
// Detach the handler, avoiding memory and side-effect leakage // Detach the handler, avoiding memory and side-effect leakage
this.animationRequestId && window.cancelAnimationFrame(this.step) this.animationRequestId && window.cancelAnimationFrame(this.step)
this.observer && this.observer.disconnect() this.observer && this.observer.disconnect()
}, },
})) }))
}) })
}`, }`,
Call: templ.SafeScript(`__templ_counterAnimation_57a0`), Call: templ.SafeScript(`__templ_counterAnimation_524d`),
CallInline: templ.SafeScriptInline(`__templ_counterAnimation_57a0`), CallInline: templ.SafeScriptInline(`__templ_counterAnimation_524d`),
} }
} }