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

feat(machine): add logo with float animation to idle screen

Browse source 
Integrate pyramid logo into idle view with a gentle floating animation
and theme-aware glow. Rename title to Bitcoinmat, enlarge action cards,
and use BitcoinIcon for Buy Bitcoin / cash emoji for Sell Bitcoin.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Patrick Mulligan 2026-02-16 21:18:02 -05:00
commit 333b8b9357
3 changed files with 28 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -476,3 +476,18 @@
@apply bg-background text-foreground;
}
}
/* Logo float animation */
@keyframes float {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-8px);
}
}
@utility animate-float {
animation: float 3s ease-in-out infinite;
}

21
apps/machine/src/views/IdleView.vue
View file

@ -36,19 +36,24 @@ function handleCashOut() {
<template>
<div class="flex flex-1 flex-col items-center justify-center gap-12 p-8">
<!-- Logo -->
<div class="text-center">
<h1 class="text-5xl font-bold text-primary">⚡ Bitcoin ATM</h1>
<div class="flex flex-col items-center gap-2">
<img
src="/logo.png"
alt="Lamassu"
class="h-40 w-40 animate-float drop-shadow-[0_0_24px_var(--primary)]"
/>
<h1 class="text-4xl font-bold text-primary">Bitcoinmat</h1>
</div>
<!-- Action Buttons -->
<div class="flex gap-8">
<!-- Buy Bitcoin -->
<Card
class="h-52 w-52 cursor-pointer border-2 border-success/50 bg-success/20 transition-all hover:scale-105 hover:border-success hover:bg-success/30 active:scale-95"
class="h-64 w-64 cursor-pointer border-2 border-success/50 bg-success/20 transition-all hover:scale-105 hover:border-success hover:bg-success/30 active:scale-95"
@click="handleCashIn"
>
<CardContent class="flex h-full flex-col items-center justify-center gap-2 p-6">
<BitcoinIcon :size="96" />
<CardContent class="flex h-full flex-col items-center justify-center gap-3 p-6">
<BitcoinIcon :size="64" class="shrink-0" />
<span class="text-xl font-bold text-success">Buy Bitcoin</span>
<span class="text-sm text-foreground/70">Insert cash, receive sats</span>
</CardContent>
@ -56,11 +61,11 @@ function handleCashOut() {
<!-- Sell Bitcoin -->
<Card
class="h-52 w-52 cursor-pointer border-2 border-warning/50 bg-warning/20 transition-all hover:scale-105 hover:border-warning hover:bg-warning/30 active:scale-95"
class="h-64 w-64 cursor-pointer border-2 border-warning/50 bg-warning/20 transition-all hover:scale-105 hover:border-warning hover:bg-warning/30 active:scale-95"
@click="handleCashOut"
>
<CardContent class="flex h-full flex-col items-center justify-center gap-2 p-6">
<span class="text-5xl">🏧</span>
<CardContent class="flex h-full flex-col items-center justify-center gap-3 p-6">
<span class="text-7xl">💵</span>
<span class="text-xl font-bold text-warning">Sell Bitcoin</span>
<span class="text-sm text-foreground/70">Pay invoice, receive cash</span>
</CardContent>