diff --git a/src/components/actor-app.tsx b/src/components/actor-app.tsx
index 28e9aa3..91467aa 100644
--- a/src/components/actor-app.tsx
+++ b/src/components/actor-app.tsx
@@ -6,6 +6,7 @@ import { HauntSigil } from "~/components/haunt-sigil";
 import { IdentityCard } from "~/components/identity-card";
 import { MasonryGrid } from "~/components/masonry-grid";
 import { ProfileSections } from "~/components/profile-sections";
+import { ProfileSigilArtifact } from "~/components/profile-sigil-artifact";
 import { resolveMiniDoc } from "~/lib/atproto/mini-doc";
 import { getBlueskyProfile } from "~/lib/providers/bluesky";
 import { searchBlueskyActors } from "~/lib/providers/bluesky-search";
@@ -123,17 +124,19 @@ export function ActorApp() {
     >
       <ProfileMasthead />
 
-      <MasonryGrid>
+      <MasonryGrid seed={identity.did}>
         {profile ? (
           <BlueskyProfile
-            did={identity.did}
             handle={identity.handle}
+            profileIdentifier={identity.handle ?? identity.did}
             profile={profile}
           />
         ) : (
           <IdentityCard identity={identity} />
         )}
 
+        <ProfileSigilArtifact did={identity.did} />
+
         <ProfileSections
           did={identity.did}
           handle={identity.handle}
diff --git a/src/components/bluesky-profile.tsx b/src/components/bluesky-profile.tsx
index 01b9b8e..dd7a040 100644
--- a/src/components/bluesky-profile.tsx
+++ b/src/components/bluesky-profile.tsx
@@ -1,17 +1,19 @@
 import { useState } from "react";
 
-import { HauntSigil } from "~/components/haunt-sigil";
 import type { BlueskyProfile } from "~/lib/providers/bluesky";
 
 type BlueskyProfileProps = {
-  did: string;
   handle: string | null;
   profile: BlueskyProfile;
+  profileIdentifier: string;
 };
 
-export function BlueskyProfile({ did, handle, profile }: BlueskyProfileProps) {
+export function BlueskyProfile({
+  handle,
+  profile,
+  profileIdentifier,
+}: BlueskyProfileProps) {
   const [avatarUrl, setAvatarUrl] = useState(profile.avatarUrl);
-  const profileIdentifier = handle ?? did;
 
   return (
     <section className="bluesky-profile profile-card border">
@@ -44,12 +46,6 @@ export function BlueskyProfile({ did, handle, profile }: BlueskyProfileProps) {
             </p>
           )}
         </div>
-
-        <HauntSigil
-          className="profile-sigil"
-          color="var(--profile-accent)"
-          seed={did}
-        />
       </div>
 
       {profile.description && (
diff --git a/src/components/grain-photos.tsx b/src/components/grain-photos.tsx
index 815b76b..72aadc3 100644
--- a/src/components/grain-photos.tsx
+++ b/src/components/grain-photos.tsx
@@ -1,35 +1,16 @@
 import type { GrainPhoto } from "~/lib/providers/grain-photo";
-import { ProfileSection } from "~/components/profile-section";
-type GrainPhotosProps = {
-  photos: GrainPhoto[];
-};
-
-export function GrainPhotos({ photos }: GrainPhotosProps) {
+import { ProfileArtifact } from "~/components/profile-artifact";
+export function GrainPhotoArtifact({ photo }: { photo: GrainPhoto }) {
   return (
-    <ProfileSection
-      title="Photos"
-      source={{ name: "grain", href: "https://grain.social" }}
-    >
-      <div className="grid gap-3 md:grid-cols-3">
-        {photos.map((photo) =>
-          photo.postUrl ? (
-            <a
-              key={`${photo.createdAt}-${photo.imageUrl}`}
-              href={photo.postUrl}
-              target="_blank"
-              rel="noreferrer"
-            >
-              <PhotoImage photo={photo} />
-            </a>
-          ) : (
-            <PhotoImage
-              key={`${photo.createdAt}-${photo.imageUrl}`}
-              photo={photo}
-            />
-          ),
-        )}
-      </div>
-    </ProfileSection>
+    <ProfileArtifact source={{ name: "grain", href: "https://grain.social" }}>
+      {photo.postUrl ? (
+        <a href={photo.postUrl} target="_blank" rel="noreferrer">
+          <PhotoImage photo={photo} />
+        </a>
+      ) : (
+        <PhotoImage photo={photo} />
+      )}
+    </ProfileArtifact>
   );
 }
 
diff --git a/src/components/masonry-grid.tsx b/src/components/masonry-grid.tsx
index 9765697..6f78df4 100644
--- a/src/components/masonry-grid.tsx
+++ b/src/components/masonry-grid.tsx
@@ -1,13 +1,16 @@
 import type { ReactNode } from "react";
 import { useLayoutEffect, useRef } from "react";
 
+import { hashString } from "~/lib/did-random";
+
 const MASONRY_MEDIA_QUERY = "(min-width: 40rem)";
 
 type MasonryGridProps = {
   children: ReactNode;
+  seed: string;
 };
 
-export function MasonryGrid({ children }: MasonryGridProps) {
+export function MasonryGrid({ children, seed }: MasonryGridProps) {
   const gridRef = useRef<HTMLDivElement>(null);
 
   useLayoutEffect(() => {
@@ -31,7 +34,7 @@ export function MasonryGrid({ children }: MasonryGridProps) {
 
       if (!mediaQuery.matches) {
         gridElement.classList.remove("profile-grid-masonry");
-        cards.forEach(clearCardPlacement);
+        cards.forEach(clearCardLayout);
         return;
       }
 
@@ -48,13 +51,15 @@ export function MasonryGrid({ children }: MasonryGridProps) {
 
       const columnHeights = Array<number>(columnCount).fill(0);
 
-      cards.forEach((card) => {
+      cards.forEach((card, index) => {
         const columnIndex = getShortestColumn(columnHeights);
-        const rowSpan = getRowSpan(card, rowHeight, rowGap);
 
         card.style.gridColumnStart = String(columnIndex + 1);
+        const rowSpan = getRowSpan(card, rowHeight, rowGap);
+
         card.style.gridRowStart = String(columnHeights[columnIndex]! + 1);
         card.style.gridRowEnd = `span ${rowSpan}`;
+        setArtifactOffset(card, seed, index);
         columnHeights[columnIndex]! += rowSpan;
       });
     }
@@ -73,7 +78,7 @@ export function MasonryGrid({ children }: MasonryGridProps) {
       mutationObserver.disconnect();
       mediaQuery.removeEventListener("change", scheduleLayout);
     };
-  }, []);
+  }, [seed]);
 
   return (
     <div ref={gridRef} className="profile-grid mx-auto max-w-6xl">
@@ -82,10 +87,21 @@ export function MasonryGrid({ children }: MasonryGridProps) {
   );
 }
 
-function clearCardPlacement(card: HTMLElement) {
+function clearCardLayout(card: HTMLElement) {
   card.style.removeProperty("grid-column-start");
   card.style.removeProperty("grid-row-start");
   card.style.removeProperty("grid-row-end");
+  card.style.removeProperty("--artifact-offset-x");
+  card.style.removeProperty("--artifact-offset-y");
+}
+
+function setArtifactOffset(card: HTMLElement, seed: string, index: number) {
+  const hash = hashString(`${seed}:artifact:${index}`);
+  const horizontalOffset = (hash % 17) - 8;
+  const verticalOffset = ((hash >>> 5) % 13) - 6;
+
+  card.style.setProperty("--artifact-offset-x", `${horizontalOffset}px`);
+  card.style.setProperty("--artifact-offset-y", `${verticalOffset}px`);
 }
 
 function getColumnCount(gridTemplateColumns: string): number {
diff --git a/src/components/profile-artifact.tsx b/src/components/profile-artifact.tsx
new file mode 100644
index 0000000..61b66a1
--- /dev/null
+++ b/src/components/profile-artifact.tsx
@@ -0,0 +1,36 @@
+import type { ReactNode } from "react";
+
+type ProfileArtifactProps = {
+  children: ReactNode;
+  kind?: "sigil";
+  source?: {
+    href: string;
+    name: string;
+  };
+};
+
+export function ProfileArtifact({
+  children,
+  kind,
+  source,
+}: ProfileArtifactProps) {
+  return (
+    <article
+      className={`profile-artifact ${kind ? `profile-artifact--${kind}` : ""} profile-card border`}
+    >
+      {children}
+      {source && (
+        <footer className="profile-divider profile-artifact-source border-t">
+          <a
+            className="profile-source-link"
+            href={source.href}
+            target="_blank"
+            rel="noreferrer"
+          >
+            {source.name}
+          </a>
+        </footer>
+      )}
+    </article>
+  );
+}
diff --git a/src/components/profile-section.tsx b/src/components/profile-section.tsx
deleted file mode 100644
index 0a5b803..0000000
--- a/src/components/profile-section.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import type { ReactNode } from "react";
-
-type ProfileSectionProps = {
-  children: ReactNode;
-  source?: {
-    href: string;
-    name: string;
-  };
-  title: string;
-};
-
-export function ProfileSection({
-  title,
-  source,
-  children,
-}: ProfileSectionProps) {
-  return (
-    <section className="profile-card border">
-      {source ? (
-        <header className="mb-4">
-          <h2 className="profile-section-title">{title}</h2>
-        </header>
-      ) : (
-        <h2 className="sr-only">{title}</h2>
-      )}
-      {children}
-      {source && (
-        <footer className="profile-divider mt-4 flex justify-end border-t pt-3">
-          <a
-            className="profile-source-link"
-            href={source.href}
-            target="_blank"
-            rel="noreferrer"
-          >
-            {source.name}
-          </a>
-        </footer>
-      )}
-    </section>
-  );
-}
diff --git a/src/components/profile-sections.tsx b/src/components/profile-sections.tsx
index ac2dbe8..77c6ed5 100644
--- a/src/components/profile-sections.tsx
+++ b/src/components/profile-sections.tsx
@@ -1,11 +1,10 @@
-import type { ReactNode } from "react";
 import { useEffect, useState } from "react";
 
-import { GrainPhotos } from "~/components/grain-photos";
-import { ProfileSection } from "~/components/profile-section";
-import { RockskyScrobbleList } from "~/components/rocksky-scrobble-list";
-import { StandardDocuments } from "~/components/standard-documents";
-import { TangledRepoList } from "~/components/tangled-repo-list";
+import { GrainPhotoArtifact } from "~/components/grain-photos";
+import { ProfileArtifact } from "~/components/profile-artifact";
+import { RockskyScrobble } from "~/components/rocksky-scrobble-list";
+import { StandardDocumentArtifact } from "~/components/standard-documents";
+import { TangledRepoArtifact } from "~/components/tangled-repo-list";
 import { getDidSectionOrder } from "~/lib/layout/did-section-order";
 import { getRecentGrainPhotos } from "~/lib/providers/grain-photo";
 import { getRecentRocksky } from "~/lib/providers/rocksky";
@@ -53,33 +52,41 @@ export function ProfileSections({ did, handle, pds }: ProfileSectionsProps) {
 
   if (!data) {
     return (
-      <ProfileSection title="Gathering signals">
+      <ProfileArtifact>
+        <h2 className="profile-item-title">Gathering signals</h2>
         <p className="text-sm">Searching the Atmosphere…</p>
-      </ProfileSection>
+      </ProfileArtifact>
     );
   }
 
-  const sections: ReactNode[] = [];
-
-  if (data.scrobbles.length > 0) {
-    sections.push(
-      <RockskyScrobbleList key="rocksky" scrobbles={data.scrobbles} />,
-    );
-  }
-
-  if (data.tangledRepos.length > 0) {
-    sections.push(<TangledRepoList key="tangled" repos={data.tangledRepos} />);
-  }
-
-  if (data.documents.length > 0) {
-    sections.push(
-      <StandardDocuments key="standard" documents={data.documents} />,
-    );
-  }
-
-  if (data.photos.length > 0) {
-    sections.push(<GrainPhotos key="grain" photos={data.photos} />);
-  }
-
-  return <>{getDidSectionOrder(did, sections)}</>;
+  const artifacts = [
+    ...data.scrobbles.map((scrobble) => (
+      <RockskyScrobble
+        key={`rocksky-${scrobble.createdAt}-${scrobble.mbid}`}
+        album={scrobble.album}
+        albumArtUrl={scrobble.albumArtUrl}
+        artist={scrobble.artist}
+        createdAt={scrobble.createdAt}
+        spotifyLink={scrobble.spotifyLink}
+        title={scrobble.title}
+      />
+    )),
+    ...data.tangledRepos.map((repo) => (
+      <TangledRepoArtifact key={`tangled-${repo.repoDid}`} repo={repo} />
+    )),
+    ...data.documents.map((document) => (
+      <StandardDocumentArtifact
+        key={`standard-${document.path}-${document.publishedAt}`}
+        document={document}
+      />
+    )),
+    ...data.photos.map((photo) => (
+      <GrainPhotoArtifact
+        key={`grain-${photo.createdAt}-${photo.imageUrl}`}
+        photo={photo}
+      />
+    )),
+  ];
+
+  return <>{getDidSectionOrder(did, artifacts)}</>;
 }
diff --git a/src/components/profile-sigil-artifact.tsx b/src/components/profile-sigil-artifact.tsx
new file mode 100644
index 0000000..f8b796c
--- /dev/null
+++ b/src/components/profile-sigil-artifact.tsx
@@ -0,0 +1,14 @@
+import { HauntSigil } from "~/components/haunt-sigil";
+import { ProfileArtifact } from "~/components/profile-artifact";
+
+export function ProfileSigilArtifact({ did }: { did: string }) {
+  return (
+    <ProfileArtifact kind="sigil">
+      <HauntSigil
+        className="profile-sigil-artifact"
+        color="var(--profile-accent)"
+        seed={did}
+      />
+    </ProfileArtifact>
+  );
+}
diff --git a/src/components/rocksky-scrobble-list.tsx b/src/components/rocksky-scrobble-list.tsx
index 20077f8..fe40e8f 100644
--- a/src/components/rocksky-scrobble-list.tsx
+++ b/src/components/rocksky-scrobble-list.tsx
@@ -1,38 +1,11 @@
 import type { RockskyScrobbleRecord } from "~/lib/providers/rocksky";
-import { ProfileSection } from "~/components/profile-section";
-
-type RockskyScrobbleListProps = {
-  scrobbles: RockskyScrobbleRecord[];
-};
+import { ProfileArtifact } from "~/components/profile-artifact";
 
 type RockskyScrobbleProps = Pick<
   RockskyScrobbleRecord,
   "album" | "albumArtUrl" | "artist" | "createdAt" | "spotifyLink" | "title"
 >;
 
-export function RockskyScrobbleList({ scrobbles }: RockskyScrobbleListProps) {
-  return (
-    <ProfileSection
-      title="Music"
-      source={{ name: "rocksky", href: "https://rocksky.app" }}
-    >
-      <div className="max-w-3xl">
-        {scrobbles.map((scrobble) => (
-          <RockskyScrobble
-            key={`${scrobble.createdAt}-${scrobble.mbid}`}
-            album={scrobble.album}
-            albumArtUrl={scrobble.albumArtUrl}
-            artist={scrobble.artist}
-            createdAt={scrobble.createdAt}
-            spotifyLink={scrobble.spotifyLink}
-            title={scrobble.title}
-          />
-        ))}
-      </div>
-    </ProfileSection>
-  );
-}
-
 function formatRelativeTime(createdAt: string): string {
   const elapsedMinutes = Math.round(
     (Date.now() - new Date(createdAt).getTime()) / 60000,
@@ -47,7 +20,7 @@ function formatRelativeTime(createdAt: string): string {
   return `${Math.round(elapsedHours / 24)} days ago`;
 }
 
-function RockskyScrobble({
+export function RockskyScrobble({
   title,
   artist,
   album,
@@ -56,34 +29,33 @@ function RockskyScrobble({
   albumArtUrl,
 }: RockskyScrobbleProps) {
   return (
-    <a
-      href={spotifyLink}
-      target="_blank"
-      rel="noreferrer"
-      className="profile-external-link profile-divider grid grid-cols-[3rem_1fr_auto] items-center gap-3 border-b py-2.5 last:border-b-0"
-    >
-      {albumArtUrl ? (
-        <img
-          src={albumArtUrl}
-          alt={`${album} album art`}
-          width={40}
-          height={40}
-          className="size-10 object-cover"
-        />
-      ) : (
-        <div className="size-10 border" />
-      )}
-
-      <div className="min-w-0">
-        <h3 className="profile-item-title">{title}</h3>
-        <p className="profile-secondary mt-0.5">
-          {artist} · {album}
-        </p>
-      </div>
-
-      <span className="profile-metadata whitespace-nowrap">
-        {formatRelativeTime(createdAt)}
-      </span>
-    </a>
+    <ProfileArtifact source={{ name: "rocksky", href: "https://rocksky.app" }}>
+      <a
+        className="profile-external-link grid grid-cols-[3rem_1fr] items-center gap-3"
+        href={spotifyLink}
+        target="_blank"
+        rel="noreferrer"
+      >
+        {albumArtUrl ? (
+          <img
+            src={albumArtUrl}
+            alt={`${album} album art`}
+            width={48}
+            height={48}
+            className="size-12 object-cover"
+          />
+        ) : (
+          <div className="size-12 border" />
+        )}
+
+        <div className="min-w-0">
+          <h2 className="profile-item-title">{title}</h2>
+          <p className="profile-secondary mt-0.5">
+            {artist} · {album}
+          </p>
+        </div>
+      </a>
+      <p className="profile-metadata mt-3">{formatRelativeTime(createdAt)}</p>
+    </ProfileArtifact>
   );
 }
diff --git a/src/components/standard-documents.tsx b/src/components/standard-documents.tsx
index c1b6d66..307622d 100644
--- a/src/components/standard-documents.tsx
+++ b/src/components/standard-documents.tsx
@@ -1,51 +1,42 @@
 import type { StandardDocument } from "~/lib/providers/standard-site";
-import { ProfileSection } from "~/components/profile-section";
-type StandardDocumentsProps = {
-  documents: StandardDocument[];
-};
-
-export function StandardDocuments({ documents }: StandardDocumentsProps) {
+import { ProfileArtifact } from "~/components/profile-artifact";
+export function StandardDocumentArtifact({
+  document,
+}: {
+  document: StandardDocument;
+}) {
   return (
-    <ProfileSection
-      title="Writing"
+    <ProfileArtifact
       source={{ name: "standard.site", href: "https://standard.site" }}
     >
-      <div>
-        {documents.map((document) => (
-          <article
-            key={`${document.path}-${document.publishedAt}`}
-            className="profile-divider border-b py-3 last:border-b-0"
+      <h2 className="profile-item-title">
+        {document.link ? (
+          <a
+            className="profile-link"
+            href={document.link}
+            target="_blank"
+            rel="noreferrer"
           >
-            <h3 className="profile-item-title">
-              {document.link ? (
-                <a
-                  className="profile-link"
-                  href={document.link}
-                  target="_blank"
-                  rel="noreferrer"
-                >
-                  {document.title}
-                </a>
-              ) : (
-                document.title
-              )}
-            </h3>
+            {document.title}
+          </a>
+        ) : (
+          document.title
+        )}
+      </h2>
 
-            {document.description && (
-              <p className="profile-secondary mt-1">{document.description}</p>
-            )}
+      {document.description && (
+        <p className="profile-secondary mt-2">{document.description}</p>
+      )}
 
-            <div className="profile-metadata mt-2">
-              {document.publishedAt && (
-                <time dateTime={document.publishedAt}>
-                  {formatPublishedAt(document.publishedAt)}
-                </time>
-              )}
-            </div>
-          </article>
-        ))}
-      </div>
-    </ProfileSection>
+      {document.publishedAt && (
+        <time
+          className="profile-metadata mt-3 block"
+          dateTime={document.publishedAt}
+        >
+          {formatPublishedAt(document.publishedAt)}
+        </time>
+      )}
+    </ProfileArtifact>
   );
 }
 
diff --git a/src/components/tangled-repo-list.tsx b/src/components/tangled-repo-list.tsx
index 66a8dec..40e57ea 100644
--- a/src/components/tangled-repo-list.tsx
+++ b/src/components/tangled-repo-list.tsx
@@ -1,46 +1,30 @@
 import type { ReactNode } from "react";
 
 import type { TangledRepo } from "~/lib/providers/tangled";
-import { ProfileSection } from "~/components/profile-section";
+import { ProfileArtifact } from "~/components/profile-artifact";
 
-type TangledRepoListProps = {
-  repos: TangledRepo[];
-};
-
-export function TangledRepoList({ repos }: TangledRepoListProps) {
+export function TangledRepoArtifact({ repo }: { repo: TangledRepo }) {
   return (
-    <ProfileSection
-      title="Code"
-      source={{ name: "tangled", href: "https://tangled.org" }}
-    >
-      <div>
-        {repos.map((repo) => (
-          <article
-            key={repo.repoDid}
-            className="profile-divider border-b py-3 last:border-b-0"
+    <ProfileArtifact source={{ name: "tangled", href: "https://tangled.org" }}>
+      <div className="flex items-center justify-between gap-3">
+        <h2 className="profile-item-title">
+          <a
+            className="profile-link"
+            href={repo.link}
+            target="_blank"
+            rel="noreferrer"
           >
-            <div className="flex items-center justify-between gap-3">
-              <h3 className="profile-item-title">
-                <a
-                  className="profile-link"
-                  href={repo.link}
-                  target="_blank"
-                  rel="noreferrer"
-                >
-                  {repo.name}
-                </a>
-              </h3>
-              <span className="profile-metadata shrink-0 opacity-100">
-                ⭐ {repo.stars}
-              </span>
-            </div>
-            <p className="profile-secondary mt-1">
-              {renderMarkdownLinks(repo.description ?? "No description")}
-            </p>
-          </article>
-        ))}
+            {repo.name}
+          </a>
+        </h2>
+        <span className="profile-metadata shrink-0 opacity-100">
+          ⭐ {repo.stars}
+        </span>
       </div>
-    </ProfileSection>
+      <p className="profile-secondary mt-2">
+        {renderMarkdownLinks(repo.description ?? "No description")}
+      </p>
+    </ProfileArtifact>
   );
 }
 
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 414b53f..b78cffc 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -299,6 +299,13 @@ body {
   grid-auto-rows: 0.5rem;
 }
 
+.profile-grid-masonry > * {
+  transform: translate(
+    var(--artifact-offset-x, 0),
+    var(--artifact-offset-y, 0)
+  );
+}
+
 .profile-card {
   background-color: var(--profile-card);
   border-color: color-mix(in srgb, var(--profile-border) 58%, transparent);
@@ -338,20 +345,20 @@ body {
 }
 
 .profile-identity-header {
-  --profile-sigil-size: 2.75rem;
-
   display: grid;
-  grid-template-columns: 4rem minmax(0, 1fr) var(--profile-sigil-size);
+  grid-template-columns: 4rem minmax(0, 1fr);
   align-items: start;
   gap: 0.875rem;
 }
 
-.profile-sigil {
-  height: var(--profile-sigil-size);
-  justify-self: end;
-  margin-top: 0.125rem;
-  opacity: 0.72;
-  width: var(--profile-sigil-size);
+.profile-artifact--sigil {
+  display: grid;
+  place-items: center;
+}
+
+.profile-sigil-artifact {
+  height: clamp(8rem, 18vw, 10rem);
+  width: clamp(8rem, 18vw, 10rem);
 }
 
 .profile-name {
@@ -361,12 +368,6 @@ body {
   line-height: 1.05;
 }
 
-.profile-section-title {
-  font-size: 1rem;
-  font-weight: 650;
-  line-height: 1.3;
-}
-
 .profile-source-link {
   font-size: 0.75rem;
   line-height: 1.4;
@@ -377,6 +378,13 @@ body {
   text-underline-offset: 0.18em;
 }
 
+.profile-artifact-source {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 1rem;
+  padding-top: 0.75rem;
+}
+
 .profile-source-link:hover,
 .profile-source-link:focus-visible {
   opacity: 0.82;
@@ -411,15 +419,6 @@ body {
   opacity: 0.62;
 }
 
-@container (max-width: 21rem) {
-  .profile-identity-header {
-    --profile-sigil-size: 2.25rem;
-
-    gap: 0.75rem;
-  }
-}
-
-
 @keyframes atmosphere-drift {
   to {
     background-position: 100% 100%;