Skip to content

docs: Animate code section buttons on the new homepage #2778

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
iwoplaza merged 1 commit into from
Aug 4, 2026
Merged

docs: Animate code section buttons on the new homepage #2778

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions apps/typegpu-docs/src/components/CodeButton.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,13 @@ const { title, message, icon: Icon } = Astro.props as Props;
---

<div
class="relative isolate box-border flex aspect-square flex-col items-start bg-gradient-to-tl p-6 lg:p-8"
class="group relative isolate box-border flex aspect-square w-72 flex-shrink-0 cursor-pointer flex-col items-start bg-gradient-to-tl p-6 md:w-auto lg:p-8"
>
<div
class="from-gradient-blue to-gradient-purple absolute inset-0 -z-10 bg-gradient-to-tl"
class="from-gradient-blue to-gradient-purple absolute inset-0 -z-10 overflow-hidden bg-gradient-to-tl perspective-near"
>
<div
class="bg-tameplum-80 absolute inset-0 scale-100 transition-all duration-200 ease-out will-change-transform in-[[data-active=true]]:scale-[98.5%] dark:bg-[#30354A]"
class="bg-tameplum-80 in-[[data-active=true]]:next-group-hover:rotate-y-2 in-[[data-active=true]]:prev-group-hover:-rotate-y-2 in-[[data-active=true]]:next-group-hover:rounded in-[[data-active=true]]:next-group-hover:scale-[99%] in-[[data-active=true]]:prev-group-hover:rounded in-[[data-active=true]]:prev-group-hover:scale-[99%] absolute inset-0 scale-100 transform-gpu transition-all duration-300 ease-[cubic-bezier(0.5,1.8,0.3,0.8)] will-change-transform in-[[data-active=true]]:scale-[98.5%] in-[[data-active=true]]:group-hover:scale-[97.5%] dark:bg-[#30354A] dark:group-hover:bg-[#32384D]"
>
</div>
</div>
Expand Down
48 changes: 19 additions & 29 deletions apps/typegpu-docs/src/components/CodeShowcase.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,37 +10,25 @@ const sectionId = 'interactive-code-section';

<div class="flex flex-col self-stretch" id={sectionId}>
<div
class="horizontal-scroll box-border flex max-w-screen gap-4 overflow-x-auto px-6 pb-2 md:grid md:grid-cols-3 md:overflow-visible"
class="code-button-container horizontal-scroll box-border flex max-w-screen gap-4 overflow-x-auto px-6 pb-2 md:grid md:grid-cols-3 md:overflow-visible"
role="tablist"
aria-label="TypeGPU use cases"
>
<div
class="code-button-wrapper w-72 flex-shrink-0 cursor-pointer md:w-auto"
>
<CodeButton
title="As a foundation"
message="TypeGPU smooths out the tough parts of WebGPU without boxing you in."
icon={Brackets}
/>
</div>
<div
class="code-button-wrapper w-72 flex-shrink-0 cursor-pointer md:w-auto"
>
<CodeButton
title="As a puzzle piece"
message="Pick and choose the APIs you need, and plug them into your code however you want."
icon={PlusCircle}
/>
</div>
<div
class="code-button-wrapper w-72 flex-shrink-0 cursor-pointer md:w-auto"
>
<CodeButton
title="For libraries"
message="Simplify library internals, and make your user-facing API type-safe by default."
icon={BookOpened}
/>
</div>
<CodeButton
title="As a foundation"
message="TypeGPU smooths out the tough parts of WebGPU without boxing you in."
icon={Brackets}
/>
<CodeButton
title="As a puzzle piece"
message="Pick and choose the APIs you need, and plug them into your code however you want."
icon={PlusCircle}
/>
<CodeButton
title="For libraries"
message="Simplify library internals, and make your user-facing API type-safe by default."
icon={BookOpened}
/>
</div>

<div class="codepen-container px-6">
Expand Down Expand Up @@ -153,7 +141,9 @@ function frame() {

<script define:vars={{ sectionId }}>
const section = document.getElementById(sectionId);
const buttons = Array.from(section.querySelectorAll('.code-button-wrapper'));
const buttons = Array.from(
section.querySelectorAll('.code-button-container > *'),
);
const codePens = Array.from(
section.querySelectorAll('.codepen-container > *'),
);
Expand Down
2 changes: 2 additions & 0 deletions apps/typegpu-docs/src/tailwind.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,6 +74,8 @@
}

@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));
@custom-variant next-group-hover (&:is(:where(.group):has(~ .group:hover) *));
@custom-variant prev-group-hover (&:is(.group:hover ~ :where(.group) *));

body {
/* causes the font weights to reflect how they appear on Figma */
Expand Down
Loading