create-apexjs 0.6.8 → 0.6.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
<!-- Example animated splash — copy to your app's pages/splash.alpine.
|
|
2
|
+
The native shell loads /splash first; icon pops in, then "APEX JS" types out with a
|
|
3
|
+
blinking cursor (CSS-only — flash-free), then it advances to /.
|
|
4
|
+
|
|
5
|
+
Auto-advance is on the root template's x-init (a CLIENT attribute Alpine runs on
|
|
6
|
+
hydration) — NOT <script client>, whose top-level code would run during SSR and crash a
|
|
7
|
+
bare on-device engine. Responsive + reduced-motion aware. -->
|
|
8
|
+
<script server>
|
|
9
|
+
export function head() { return { title: 'Loading…' } }
|
|
10
|
+
</script>
|
|
11
|
+
|
|
12
|
+
<template x-data="{}" x-init="setTimeout(() => { window.location.href = '/' }, 2600)">
|
|
13
|
+
<div class="splash">
|
|
14
|
+
<!-- The app's icon (served from /favicon.svg — swap for your own brand mark). -->
|
|
15
|
+
<img class="mark" src="/favicon.svg" alt="Apex" width="96" height="96" />
|
|
16
|
+
<div class="typed">APEX JS</div>
|
|
17
|
+
</div>
|
|
18
|
+
</template>
|
|
19
|
+
|
|
20
|
+
<style scoped>
|
|
21
|
+
.splash {
|
|
22
|
+
position: fixed; inset: 0;
|
|
23
|
+
display: flex; flex-direction: column; align-items: center; justify-content: center;
|
|
24
|
+
gap: clamp(1rem, 5vw, 1.75rem);
|
|
25
|
+
background: #0b1120; color: #38bdf8;
|
|
26
|
+
padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
|
|
27
|
+
}
|
|
28
|
+
.mark {
|
|
29
|
+
width: clamp(4.5rem, 24vw, 6.5rem); height: auto; aspect-ratio: 1;
|
|
30
|
+
display: block; object-fit: contain;
|
|
31
|
+
animation: pop 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.2) both;
|
|
32
|
+
}
|
|
33
|
+
.typed {
|
|
34
|
+
font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
|
|
35
|
+
font-weight: 600; font-size: clamp(1.1rem, 5.5vw, 1.6rem);
|
|
36
|
+
white-space: nowrap; overflow: hidden;
|
|
37
|
+
width: 0; max-width: 7ch;
|
|
38
|
+
border-right: 0.09em solid currentColor;
|
|
39
|
+
animation: type 1.3s steps(7, end) 0.55s forwards, blink 0.85s step-end 0.55s infinite;
|
|
40
|
+
}
|
|
41
|
+
@keyframes pop { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: scale(1); } }
|
|
42
|
+
@keyframes type { to { width: 7ch; } }
|
|
43
|
+
@keyframes blink { 50% { border-color: transparent; } }
|
|
44
|
+
@media (prefers-reduced-motion: reduce) {
|
|
45
|
+
.mark { animation: none; }
|
|
46
|
+
.typed { width: 7ch; animation: blink 0.85s step-end infinite; }
|
|
47
|
+
}
|
|
48
|
+
</style>
|