aiolabs/bitspire
9
0
Fork 0
Code Issues 52 Pull requests 2 Projects Releases Packages Wiki Activity Actions

feat(ui): replace hourglass animation with pickaxe mining swing

Browse source 
Replace the dead hourglass CSS animation with a thematic pickaxe mining
animation. The pickaxe swings from resting position up to -45deg then
strikes down, mimicking a mining motion. Used in the generatingNdebit
loading state; other loading states still use BounceDots pending review.

Refs #33

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Patrick Mulligan 2026-03-14 00:15:59 -04:00
commit de6a9559ff
3 changed files with 24 additions and 33 deletions
Download patch file Download diff file Expand all files Collapse all files

35
apps/machine/src/style.css
View file

@ -526,39 +526,32 @@
animation: float 3s ease-in-out infinite;
}
/* Hourglass 45-degree step rotation */
@keyframes hourglass {
/* Pickaxe mining swing */
@keyframes pickaxe {
0% {
transform: rotate(0deg);
}
12.5% {
transform: rotate(45deg);
20% {
transform: rotate(15deg);
}
25% {
transform: rotate(90deg);
40% {
transform: rotate(-60deg);
}
37.5% {
transform: rotate(135deg);
45% {
transform: rotate(-30deg);
}
50% {
transform: rotate(180deg);
}
62.5% {
transform: rotate(225deg);
}
75% {
transform: rotate(270deg);
}
87.5% {
transform: rotate(315deg);
transform: rotate(-30deg);
}
100% {
transform: rotate(360deg);
transform: rotate(0deg);
}
}
@utility animate-hourglass {
animation: hourglass 4s steps(8) infinite;
@utility animate-pickaxe {
animation: pickaxe 0.8s ease-in-out infinite;
transform-origin: bottom right;
display: inline-block;
}
/* Monospace utility for addresses/codes */

11
apps/machine/src/views/CashInView.vue
View file

@ -6,7 +6,6 @@ import { Button } from '@/components/ui/button'
import { Alert, AlertDescription } from '@/components/ui/alert'
import { Input } from '@/components/ui/input'
import QRCode from '@/components/QRCode.vue'
import BounceDots from '@/components/BounceDots.vue'
import StepIndicator from '@/components/StepIndicator.vue'
const router = useRouter()
@ -197,7 +196,7 @@ const isProcessing = computed(() => atmStore.isPayingInvoice)
key="fetchingRate"
class="flex flex-1 flex-col items-center justify-center gap-6"
>
<BounceDots class="scale-150" />
<span class="text-[8vh] animate-pickaxe">⛏️</span>
<p class="text-2xl text-muted-foreground">Fetching exchange rate...</p>
</div>
@ -301,7 +300,7 @@ const isProcessing = computed(() => atmStore.isPayingInvoice)
key="generatingNdebit"
class="flex flex-1 flex-col items-center justify-center gap-6"
>
<BounceDots class="scale-150" />
<span class="text-[8vh] animate-pickaxe">⛏️</span>
<p class="text-2xl text-muted-foreground">Preparing your withdraw code...</p>
</div>
@ -327,7 +326,7 @@ const isProcessing = computed(() => atmStore.isPayingInvoice)
<!-- Waiting indicator -->
<div class="flex items-center gap-3 pt-2 lg:pt-4">
<BounceDots />
<span class="text-2xl animate-pickaxe">⛏️</span>
<p class="text-sm lg:text-xl text-muted-foreground">Waiting for wallet scan...</p>
</div>
@ -365,13 +364,13 @@ const isProcessing = computed(() => atmStore.isPayingInvoice)
class="flex w-full lg:w-[48%] flex-col items-center justify-center bg-foreground/5 p-4 lg:p-6"
>
<div v-if="isGeneratingLnurl && !context?.ndebitUri">
<BounceDots class="scale-150" />
<span class="text-[8vh] animate-pickaxe">⛏️</span>
</div>
<div v-else-if="currentQrValue">
<QRCode :value="currentQrValue" :size="380" />
</div>
<div v-else class="flex flex-col items-center gap-4">
<BounceDots class="scale-150" />
<span class="text-[8vh] animate-pickaxe">⛏️</span>
<p class="text-xl text-muted-foreground">Generating...</p>
</div>
</div>

11
apps/machine/src/views/CashOutView.vue
View file

@ -6,7 +6,6 @@ import { Button } from '@/components/ui/button'
import { Badge } from '@/components/ui/badge'
import { Alert, AlertDescription } from '@/components/ui/alert'
import QRCode from '@/components/QRCode.vue'
import BounceDots from '@/components/BounceDots.vue'
import StepIndicator from '@/components/StepIndicator.vue'
const router = useRouter()
@ -163,7 +162,7 @@ function formatFiat(cents: number): string {
key="fetchingRate"
class="flex flex-1 flex-col items-center justify-center gap-6"
>
<BounceDots class="scale-150" />
<span class="text-[8vh] animate-pickaxe">⛏️</span>
<p class="text-2xl text-muted-foreground">Fetching exchange rate...</p>
</div>
@ -270,7 +269,7 @@ function formatFiat(cents: number): string {
key="generatingInvoice"
class="flex flex-1 flex-col items-center justify-center gap-6"
>
<BounceDots class="scale-150" />
<span class="text-[8vh] animate-pickaxe">⛏️</span>
<p class="text-2xl text-muted-foreground">Creating invoice...</p>
</div>
@ -297,7 +296,7 @@ function formatFiat(cents: number): string {
<!-- Waiting indicator -->
<div class="flex items-center gap-3 pt-2 lg:pt-4">
<BounceDots />
<span class="text-2xl animate-pickaxe">⛏️</span>
<p class="text-sm lg:text-xl text-muted-foreground">Waiting for payment...</p>
</div>
@ -334,7 +333,7 @@ function formatFiat(cents: number): string {
<QRCode :value="context.invoice" :size="380" />
</div>
<div v-else class="flex flex-col items-center gap-4">
<BounceDots class="scale-150" />
<span class="text-[8vh] animate-pickaxe">⛏️</span>
<p class="text-xl text-muted-foreground">Generating invoice...</p>
</div>
</div>
@ -346,7 +345,7 @@ function formatFiat(cents: number): string {
key="dispensingCash"
class="flex flex-1 flex-col items-center justify-center gap-6"
>
<BounceDots class="scale-150" />
<span class="text-[8vh] animate-pickaxe">⛏️</span>
<p class="text-2xl text-muted-foreground">Dispensing cash...</p>
<p class="text-xl text-muted-foreground">Please wait</p>
</div>