Share songs with friends on atproto
atjams.pdewey.com
elixir
atproto
music
feat: ux tweaks
Patrick Dewey
(May 27, 2026, 5:21 PM EDT)
59ca61cf
06c76725
+40
-9
+1
-1
README.md
+1
-1
README.md
···
1
1
# Atjams
2
2
3
-
Share songs with friends over the [AT Protocol](https://atproto.com).
3
+
Quickly find and share songs on the [AT Protocol](https://atproto.com).
4
4
5
5
Built with Elixir, Phoenix LiveView, [ATEx](https://hex.pm/packages/atex), and [Drinkup](https://hex.pm/packages/drinkup).
6
6
+35
assets/css/app.css
+35
assets/css/app.css
···
200
200
}
201
201
202
202
.atj-brand-mark {
203
+
--atj-wave-left: 52%;
204
+
--atj-wave-width: 38%;
205
+
--atj-wave-glow: 4px;
203
206
border-radius: 0.85rem;
204
207
border-color: color-mix(in oklch, var(--atj-signal) 38%, var(--atj-line));
205
208
box-shadow: inset 0 1px 0 color-mix(in oklch, var(--atj-bone) 7%, transparent), 0 0 24px color-mix(in oklch, var(--atj-signal) 11%, transparent);
···
214
217
box-shadow: 0 0 0 5px color-mix(in oklch, var(--atj-signal) 12%, transparent);
215
218
}
216
219
220
+
.atj-brand-mark::after,
221
+
.atj-room-mark::after,
222
+
.atj-disc-mark::after {
223
+
content: "";
224
+
position: absolute;
225
+
z-index: 1;
226
+
left: var(--atj-wave-left, 50%);
227
+
top: var(--atj-wave-top, 46%);
228
+
width: var(--atj-wave-width, 42%);
229
+
height: var(--atj-wave-height, 26%);
230
+
transform: translate(-50%, -50%);
231
+
border-radius: 999px;
232
+
background: var(--atj-bone);
233
+
clip-path: polygon(
234
+
0 56%, 10% 56%, 15% 34%, 22% 78%, 30% 78%, 36% 14%,
235
+
44% 92%, 52% 92%, 58% 38%, 65% 68%, 73% 68%, 78% 48%,
236
+
100% 48%, 100% 62%, 84% 62%, 79% 82%, 69% 82%, 63% 52%,
237
+
57% 100%, 39% 100%, 33% 34%, 27% 92%, 17% 92%, 11% 66%, 0 66%
238
+
);
239
+
opacity: 0.95;
240
+
filter: drop-shadow(0 0 var(--atj-wave-glow, 5px) color-mix(in oklch, var(--atj-bone) 22%, transparent));
241
+
}
242
+
217
243
.atj-room-mark {
244
+
--atj-wave-width: 40%;
245
+
--atj-wave-height: 22%;
246
+
--atj-wave-glow: 8px;
218
247
border-radius: 1.15rem;
219
248
box-shadow: inset 0 1px 0 color-mix(in oklch, var(--atj-bone) 6%, transparent);
220
249
}
···
232
261
.atj-meter-mark {
233
262
border-radius: 0.95rem;
234
263
flex-shrink: 0;
264
+
}
265
+
266
+
.atj-disc-mark {
267
+
--atj-wave-width: 42%;
268
+
--atj-wave-height: 24%;
269
+
--atj-wave-glow: 4px;
235
270
}
236
271
237
272
.atj-disc-mark::before {
+1
-4
lib/atjams_web/components/layouts.ex
+1
-4
lib/atjams_web/components/layouts.ex
···
41
41
<div class="leading-none">
42
42
<span class="block text-base font-bold tracking-tight text-base-content">atjams</span>
43
43
<span class="atj-muted hidden text-[0.68rem] font-semibold uppercase tracking-[0.16em] sm:block">
44
-
atjams
44
+
Songs on the AT Protocol
45
45
</span>
46
46
</div>
47
47
</.link>
···
49
49
50
50
<nav class="w-full flex-none sm:w-auto" aria-label="Primary navigation">
51
51
<ul class="flex flex-wrap items-center gap-2 sm:justify-end">
52
-
<li>
53
-
<.link navigate={~p"/feed"} class="atj-btn atj-btn-ghost atj-btn-sm">Feed</.link>
54
-
</li>
55
52
<%= if @current_user do %>
56
53
<li>
57
54
<.link navigate={~p"/share/new"} class="atj-btn atj-btn-primary atj-btn-sm">
+1
-1
lib/atjams_web/live/feed_live.html.heex
+1
-1
lib/atjams_web/live/feed_live.html.heex
···
1
1
<Layouts.app flash={@flash} current_user={@current_user}>
2
2
<div class="atj-page-header">
3
3
<div>
4
-
<p class="atj-kicker mb-2">shared signal</p>
4
+
<p class="atj-kicker mb-2">recent shares</p>
5
5
<h1 class="atj-title">Feed</h1>
6
6
<p class="atj-muted mt-1 max-w-md text-sm">
7
7
Songs people are sharing right now.
+2
-3
lib/atjams_web/live/home_live.html.heex
+2
-3
lib/atjams_web/live/home_live.html.heex
···
4
4
<p class="atj-kicker mb-4">atjams</p>
5
5
6
6
<h1 class="max-w-2xl text-4xl font-black leading-[1.04] tracking-normal text-balance text-base-content sm:text-6xl">
7
-
Share songs without turning music into feed noise.
7
+
Quickly find and share songs.
8
8
</h1>
9
9
10
10
<p class="atj-copy mt-5 max-w-xl text-lg leading-8 text-balance">
11
-
Atjams is a low-glare room for tracks shared across the AT Protocol.
12
-
Bring a link, add a listening note, keep the signal clean.
11
+
Post a link, add a note, and browse what people are listening to on the AT Protocol.
13
12
</p>
14
13
15
14
<button