Monorepo for Aesthetic.Computer
aesthetic.computer
feat: papers page — platter SVG illustration with steam + cloche
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
+119
-1
+119
-1
system/public/papers.aesthetic.computer/index.html
+119
-1
system/public/papers.aesthetic.computer/index.html
···
232
232
}
233
233
.p.guest .meta-row .author { color: var(--purple); }
234
234
235
+
/* Platter illustration */
236
+
.platter-wrap {
237
+
display: flex;
238
+
justify-content: center;
239
+
margin: 2.5em 0 0.5em;
240
+
opacity: 0.7;
241
+
transition: opacity 0.4s;
242
+
}
243
+
.platter-wrap:hover { opacity: 1; }
244
+
.platter-wrap svg { width: 180px; }
245
+
@media (min-width: 900px) { .platter-wrap svg { width: 220px; } }
246
+
@media (min-width: 1400px) { .platter-wrap svg { width: 260px; } }
247
+
235
248
.colophon {
236
-
margin-top: 2.5em;
249
+
margin-top: 1em;
237
250
padding-top: 1.2em;
238
251
border-top: 1px solid var(--sep);
239
252
color: var(--dim);
···
702
715
703
716
<!-- guest-start -->
704
717
<!-- guest-end -->
718
+
719
+
<!-- Platter SVG — decorative serving platter with papers -->
720
+
<a href="/platter" style="text-decoration:none">
721
+
<div class="platter-wrap">
722
+
<svg viewBox="0 0 300 200" fill="none" xmlns="http://www.w3.org/2000/svg">
723
+
<defs>
724
+
<!-- Subtle shine gradient for the cloche -->
725
+
<linearGradient id="cloche-shine" x1="0" y1="0" x2="1" y2="1">
726
+
<stop offset="0%" stop-color="var(--text)" stop-opacity="0.08"/>
727
+
<stop offset="40%" stop-color="var(--text)" stop-opacity="0.18"/>
728
+
<stop offset="60%" stop-color="var(--text)" stop-opacity="0.06"/>
729
+
<stop offset="100%" stop-color="var(--text)" stop-opacity="0.02"/>
730
+
</linearGradient>
731
+
<!-- Platter metallic gradient -->
732
+
<linearGradient id="platter-metal" x1="0" y1="0" x2="0" y2="1">
733
+
<stop offset="0%" stop-color="var(--text)" stop-opacity="0.15"/>
734
+
<stop offset="50%" stop-color="var(--text)" stop-opacity="0.08"/>
735
+
<stop offset="100%" stop-color="var(--text)" stop-opacity="0.12"/>
736
+
</linearGradient>
737
+
<!-- Steam glow -->
738
+
<filter id="steam-blur">
739
+
<feGaussianBlur stdDeviation="2"/>
740
+
</filter>
741
+
</defs>
742
+
743
+
<!-- === STEAM WISPS (hot off the press) === -->
744
+
<path d="M120 52 Q115 40 120 28 Q125 16 118 6" stroke="var(--cyan)" stroke-width="1.2" fill="none" opacity="0.2" stroke-linecap="round">
745
+
<animate attributeName="opacity" values="0.1;0.3;0.1" dur="2.5s" repeatCount="indefinite"/>
746
+
<animate attributeName="d" values="M120 52 Q115 40 120 28 Q125 16 118 6;M120 52 Q126 38 119 26 Q113 14 120 4;M120 52 Q115 40 120 28 Q125 16 118 6" dur="3s" repeatCount="indefinite"/>
747
+
</path>
748
+
<path d="M150 48 Q145 34 150 22 Q155 10 148 0" stroke="var(--pink)" stroke-width="1" fill="none" opacity="0.15" stroke-linecap="round">
749
+
<animate attributeName="opacity" values="0.08;0.25;0.08" dur="3s" repeatCount="indefinite" begin="0.5s"/>
750
+
<animate attributeName="d" values="M150 48 Q145 34 150 22 Q155 10 148 0;M150 48 Q156 32 149 20 Q143 8 150 -2;M150 48 Q145 34 150 22 Q155 10 148 0" dur="3.5s" repeatCount="indefinite" begin="0.5s"/>
751
+
</path>
752
+
<path d="M180 52 Q175 38 180 26 Q185 14 178 4" stroke="var(--purple)" stroke-width="1.1" fill="none" opacity="0.18" stroke-linecap="round">
753
+
<animate attributeName="opacity" values="0.1;0.28;0.1" dur="2.8s" repeatCount="indefinite" begin="1s"/>
754
+
<animate attributeName="d" values="M180 52 Q175 38 180 26 Q185 14 178 4;M180 52 Q186 36 179 24 Q173 12 180 2;M180 52 Q175 38 180 26 Q185 14 178 4" dur="3.2s" repeatCount="indefinite" begin="1s"/>
755
+
</path>
756
+
757
+
<!-- === CLOCHE (dome lid) — lifted and tilted === -->
758
+
<g transform="translate(-8, -6) rotate(-8, 150, 100)">
759
+
<!-- Dome shape -->
760
+
<path d="M80 130 Q80 55 150 50 Q220 55 220 130" fill="url(#cloche-shine)" stroke="var(--purple)" stroke-width="1.5"/>
761
+
<!-- Rim of the cloche -->
762
+
<ellipse cx="150" cy="130" rx="70" ry="8" fill="var(--text)" fill-opacity="0.06" stroke="var(--purple)" stroke-width="1"/>
763
+
<!-- Highlight arc on dome -->
764
+
<path d="M105 100 Q110 70 145 62" stroke="var(--text)" stroke-width="1.5" fill="none" opacity="0.12" stroke-linecap="round"/>
765
+
<!-- Handle/knob on top -->
766
+
<ellipse cx="150" cy="48" rx="10" ry="5" fill="var(--purple)" opacity="0.3"/>
767
+
<ellipse cx="150" cy="46" rx="7" ry="3.5" fill="var(--pink)" opacity="0.2"/>
768
+
<circle cx="150" cy="45" r="2" fill="var(--cyan)" opacity="0.3"/>
769
+
</g>
770
+
771
+
<!-- === PAPERS peeking out from under the cloche === -->
772
+
<g opacity="0.7">
773
+
<!-- Paper 1 (angled left) -->
774
+
<g transform="rotate(-12, 130, 140)">
775
+
<rect x="100" y="120" width="50" height="36" rx="1" fill="var(--text)" fill-opacity="0.1" stroke="var(--purple)" stroke-width="0.6"/>
776
+
<line x1="107" y1="128" x2="143" y2="128" stroke="var(--pink)" stroke-width="0.8" opacity="0.35"/>
777
+
<line x1="107" y1="133" x2="140" y2="133" stroke="var(--dim)" stroke-width="0.5" opacity="0.25"/>
778
+
<line x1="107" y1="137" x2="138" y2="137" stroke="var(--dim)" stroke-width="0.5" opacity="0.2"/>
779
+
<line x1="107" y1="141" x2="135" y2="141" stroke="var(--dim)" stroke-width="0.5" opacity="0.15"/>
780
+
<line x1="107" y1="145" x2="130" y2="145" stroke="var(--dim)" stroke-width="0.5" opacity="0.12"/>
781
+
</g>
782
+
<!-- Paper 2 (angled right) -->
783
+
<g transform="rotate(8, 175, 138)">
784
+
<rect x="148" y="118" width="50" height="36" rx="1" fill="var(--text)" fill-opacity="0.08" stroke="var(--cyan)" stroke-width="0.6"/>
785
+
<line x1="155" y1="126" x2="191" y2="126" stroke="var(--cyan)" stroke-width="0.8" opacity="0.3"/>
786
+
<line x1="155" y1="131" x2="188" y2="131" stroke="var(--dim)" stroke-width="0.5" opacity="0.2"/>
787
+
<line x1="155" y1="135" x2="186" y2="135" stroke="var(--dim)" stroke-width="0.5" opacity="0.15"/>
788
+
<line x1="155" y1="139" x2="183" y2="139" stroke="var(--dim)" stroke-width="0.5" opacity="0.12"/>
789
+
</g>
790
+
<!-- Paper 3 (center, slightly tilted) -->
791
+
<g transform="rotate(-3, 150, 135)">
792
+
<rect x="122" y="115" width="55" height="40" rx="1" fill="var(--text)" fill-opacity="0.06" stroke="var(--purple)" stroke-width="0.5" opacity="0.6"/>
793
+
<line x1="130" y1="124" x2="170" y2="124" stroke="var(--purple)" stroke-width="0.7" opacity="0.25"/>
794
+
<line x1="130" y1="129" x2="168" y2="129" stroke="var(--dim)" stroke-width="0.5" opacity="0.18"/>
795
+
<line x1="130" y1="133" x2="165" y2="133" stroke="var(--dim)" stroke-width="0.5" opacity="0.14"/>
796
+
<line x1="130" y1="137" x2="160" y2="137" stroke="var(--dim)" stroke-width="0.5" opacity="0.1"/>
797
+
</g>
798
+
</g>
799
+
800
+
<!-- === PLATTER BASE (oval serving tray) === -->
801
+
<!-- Shadow underneath -->
802
+
<ellipse cx="152" cy="172" rx="100" ry="14" fill="var(--text)" opacity="0.04"/>
803
+
<!-- Main platter surface -->
804
+
<ellipse cx="150" cy="162" rx="105" ry="16" fill="url(#platter-metal)" stroke="var(--purple)" stroke-width="1.5"/>
805
+
<!-- Inner rim -->
806
+
<ellipse cx="150" cy="161" rx="88" ry="12" fill="none" stroke="var(--purple)" stroke-width="0.6" opacity="0.3"/>
807
+
<!-- Highlight on rim -->
808
+
<path d="M65 158 Q100 150 150 149 Q200 150 235 158" stroke="var(--text)" stroke-width="0.8" fill="none" opacity="0.1" stroke-linecap="round"/>
809
+
<!-- Platter lip/edge (bottom rim thickness) -->
810
+
<path d="M45 162 Q45 170 150 178 Q255 170 255 162" fill="var(--text)" fill-opacity="0.04" stroke="var(--purple)" stroke-width="0.8" opacity="0.4"/>
811
+
<!-- Decorative dots on rim -->
812
+
<circle cx="70" cy="163" r="1.2" fill="var(--pink)" opacity="0.2"/>
813
+
<circle cx="90" cy="159" r="1" fill="var(--cyan)" opacity="0.2"/>
814
+
<circle cx="210" cy="159" r="1" fill="var(--cyan)" opacity="0.2"/>
815
+
<circle cx="230" cy="163" r="1.2" fill="var(--pink)" opacity="0.2"/>
816
+
<circle cx="150" cy="157" r="1" fill="var(--purple)" opacity="0.25"/>
817
+
818
+
<!-- === LABEL === -->
819
+
<text x="150" y="192" text-anchor="middle" font-family="'Berkeley Mono Variable', monospace" font-size="9" fill="var(--dim)" opacity="0.5">research platter</text>
820
+
</svg>
821
+
</div>
822
+
</a>
705
823
706
824
<div class="colophon">
707
825
<p>Papers publishes working research on the <a href="https://aesthetic.computer" class="ac-link"><span class="logo-ac">Aesthetic<span class="logo-dot">.</span>Computer</span></a> project, typeset in LaTeX and compiled from the <a href="/platter">research platter</a>. Cards are 4×6 inch mobile versions. Translated into Danish, Spanish, Chinese, and Japanese.</p>