audio streaming app
plyr.fm
fix: make aura card mysterious — locked silhouette until activated (#1128)
the aura card in settings now shows as an enigmatic dashed-border box
with a dark circle and "?" — like an unlocked character in Smash Bros.
no description, no hint about what it does. clicking it triggers the
geolocation prompt, and only after activation does it reveal the
weather orb and conditions. small x button to disable.
Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
authored by
nate nowack
Claude Opus 4.6
and committed by
GitHub
e4b4179d
e747d698
+119
-40
+118
-39
frontend/src/routes/settings/+page.svelte
+118
-39
frontend/src/routes/settings/+page.svelte
···
541
541
542
542
<section class="settings-section">
543
543
<h2>aura</h2>
544
-
<div class="settings-card aura-card">
545
-
<div class="setting-row">
546
-
<div class="setting-info">
547
-
<h3>ambient mode</h3>
548
-
<p>the app responds to your local weather, shifting its atmosphere throughout the day</p>
549
-
</div>
550
-
<label class="toggle-switch">
551
-
<input
552
-
type="checkbox"
553
-
checked={ambientEnabled}
554
-
disabled={ambientLoading}
555
-
onchange={(e) => toggleAmbient((e.target as HTMLInputElement).checked)}
556
-
/>
557
-
<span class="toggle-slider"></span>
558
-
</label>
559
-
</div>
560
-
561
-
{#if ambientEnabled && ambientCondition}
562
-
<div class="aura-preview">
563
-
<div class="aura-orb" style="background: {ambientGradient}"></div>
564
-
<span class="aura-conditions">{ambientCondition}</span>
565
-
</div>
544
+
<div class="settings-card aura-card" class:aura-active={ambientEnabled}>
545
+
{#if !ambientEnabled && !ambientLoading && !ambientError}
546
+
<button class="aura-unlock" onclick={() => toggleAmbient(true)}>
547
+
<div class="aura-silhouette">
548
+
<svg width="32" height="32" viewBox="0 0 24 24" fill="currentColor" opacity="0.4">
549
+
<circle cx="12" cy="12" r="10" />
550
+
</svg>
551
+
<span class="aura-question">?</span>
552
+
</div>
553
+
</button>
566
554
{:else if ambientLoading}
567
-
<div class="aura-notice">
568
-
<span>reading the sky...</span>
555
+
<div class="aura-loading">
556
+
<div class="aura-orb aura-orb-loading"></div>
557
+
<span class="aura-loading-text">...</span>
569
558
</div>
570
559
{:else if ambientError}
571
-
<div class="aura-notice error">
572
-
<span>{ambientError}</span>
560
+
<div class="aura-state">
561
+
<span class="aura-error">{ambientError}</span>
562
+
</div>
563
+
{:else}
564
+
<div class="aura-revealed">
565
+
<div class="aura-orb" style="background: {ambientGradient}"></div>
566
+
<span class="aura-conditions">{ambientCondition}</span>
567
+
<button class="aura-disable" onclick={() => toggleAmbient(false)} title="disable">
568
+
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
569
+
<line x1="18" y1="6" x2="6" y2="18"></line>
570
+
<line x1="6" y1="6" x2="18" y2="18"></line>
571
+
</svg>
572
+
</button>
573
573
</div>
574
574
{/if}
575
575
</div>
···
1148
1148
accent-color: var(--accent);
1149
1149
}
1150
1150
1151
-
/* aura card */
1151
+
/* aura card — locked state */
1152
1152
.aura-card {
1153
-
border-color: color-mix(in srgb, var(--accent) 20%, var(--border-subtle));
1153
+
border-color: var(--border-subtle);
1154
+
border-style: dashed;
1155
+
transition: all 0.4s ease;
1156
+
}
1157
+
1158
+
.aura-card.aura-active {
1159
+
border-style: solid;
1160
+
border-color: color-mix(in srgb, var(--accent) 30%, var(--border-subtle));
1161
+
}
1162
+
1163
+
.aura-unlock {
1164
+
display: flex;
1165
+
align-items: center;
1166
+
justify-content: center;
1167
+
width: 100%;
1168
+
padding: 1.25rem;
1169
+
background: transparent;
1170
+
border: none;
1171
+
cursor: pointer;
1172
+
transition: all 0.3s ease;
1173
+
}
1174
+
1175
+
.aura-unlock:hover {
1176
+
transform: scale(1.02);
1177
+
}
1178
+
1179
+
.aura-unlock:hover .aura-silhouette {
1180
+
opacity: 0.8;
1154
1181
}
1155
1182
1156
-
.aura-preview {
1183
+
.aura-silhouette {
1184
+
position: relative;
1185
+
display: flex;
1186
+
align-items: center;
1187
+
justify-content: center;
1188
+
opacity: 0.5;
1189
+
transition: opacity 0.3s ease;
1190
+
color: var(--text-muted);
1191
+
}
1192
+
1193
+
.aura-question {
1194
+
position: absolute;
1195
+
font-size: var(--text-xl);
1196
+
font-weight: 700;
1197
+
color: var(--bg-primary);
1198
+
}
1199
+
1200
+
/* aura card — revealed state */
1201
+
.aura-revealed {
1157
1202
display: flex;
1158
1203
align-items: center;
1159
1204
gap: 0.75rem;
1160
-
padding: 0.75rem 0 0;
1161
-
margin-top: 0.5rem;
1162
-
border-top: 1px solid var(--border-subtle);
1205
+
padding: 0.5rem 0;
1163
1206
}
1164
1207
1165
1208
.aura-orb {
···
1168
1211
border-radius: var(--radius-full);
1169
1212
flex-shrink: 0;
1170
1213
animation: aura-breathe 6s ease-in-out infinite;
1171
-
box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 30%, transparent);
1214
+
}
1215
+
1216
+
.aura-orb-loading {
1217
+
background: var(--border-default);
1172
1218
}
1173
1219
1174
1220
@keyframes aura-breathe {
···
1177
1223
}
1178
1224
1179
1225
.aura-conditions {
1226
+
flex: 1;
1180
1227
font-size: var(--text-sm);
1181
1228
color: var(--text-tertiary);
1182
1229
}
1183
1230
1184
-
.aura-notice {
1231
+
.aura-disable {
1232
+
display: flex;
1233
+
align-items: center;
1234
+
justify-content: center;
1235
+
width: 28px;
1236
+
height: 28px;
1237
+
background: transparent;
1238
+
border: none;
1239
+
border-radius: var(--radius-sm);
1240
+
color: var(--text-muted);
1241
+
cursor: pointer;
1242
+
transition: all 0.15s;
1243
+
flex-shrink: 0;
1244
+
}
1245
+
1246
+
.aura-disable:hover {
1247
+
color: var(--text-secondary);
1248
+
background: var(--bg-hover);
1249
+
}
1250
+
1251
+
.aura-loading {
1252
+
display: flex;
1253
+
align-items: center;
1254
+
justify-content: center;
1255
+
gap: 0.75rem;
1256
+
padding: 1rem 0;
1257
+
}
1258
+
1259
+
.aura-loading-text {
1185
1260
font-size: var(--text-sm);
1186
-
color: var(--text-tertiary);
1187
-
padding-top: 0.75rem;
1188
-
margin-top: 0.5rem;
1189
-
border-top: 1px solid var(--border-subtle);
1261
+
color: var(--text-muted);
1262
+
letter-spacing: 0.2em;
1263
+
}
1264
+
1265
+
.aura-state {
1266
+
padding: 0.75rem 0;
1267
+
text-align: center;
1190
1268
}
1191
1269
1192
-
.aura-notice.error {
1270
+
.aura-error {
1271
+
font-size: var(--text-sm);
1193
1272
color: var(--error);
1194
1273
}
1195
1274