Skip to content

Commit 1edc1b4

Browse files
fezcodefezcode
committed
feat(design): replace libretto with prose — 2026 writing-tool aesthetic
Pivots the quote generator shell from the opera-programme Libretto style to Prose: an off-black 2026 writing-tool aesthetic in the spirit of Linear + Arc Browser + iA Writer. Ground is #0A0A0B with a drifting aurora gradient mesh (lime/cyan/pink/ violet radial blurs that slowly translate and rotate), a masked dotted grid, and a live scroll-progress bar in the accent color at the top. Typography: oversized Fraunces italic headline (clamp 72→180px) with custom opsz/SOFT axis tuning to differentiate from terracotta's variant, Instrument Sans body, JetBrains Mono micro-labels. Accent is a single electric lime #C5F24B used for marks, focus rings, CTA, progress bar. Adds floating bento cards with gradient hairline borders (mask-composite trick), a frosted sticky top bar, a kbd-chip pattern, a live auto-cycling muse quote ticker, an accent underline animation on the hero mark, and staggered reveal animations on scroll-position. ControlPanel is reskinned via scoped CSS overrides so the embedded dark controls match: 16px rounded surfaces, accent focus rings with glow, download buttons that flip to lime on hover. Updates the /design card from Libretto to Prose with matching aesthetic (aurora mesh, gradient hairline, lime accent, Fraunces italic wordmark with lime period).
1 parent f968464 commit 1edc1b4

2 files changed

Lines changed: 421 additions & 386 deletions

File tree

‎src/pages/DesignSelectionPage.jsx‎

Lines changed: 65 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import {
1313
ScrollIcon,
1414
TerminalWindowIcon,
1515
PlantIcon,
16-
MaskHappyIcon,
16+
SparkleIcon,
1717
} from '@phosphor-icons/react';
1818
import Seo from '../components/Seo';
1919
import GenerativeArt from '../components/GenerativeArt';
@@ -592,115 +592,119 @@ const DesignSelectionPage = () => {
592592
</motion.div>
593593
</Link>
594594

595-
{/* ── LIBRETTO ── */}
595+
{/* ── PROSE ── */}
596596
<Link to="/apps/quote-generator" className="group block relative">
597597
<motion.div
598598
whileHover={{ y: -10 }}
599599
className="h-full p-12 flex flex-col justify-between overflow-hidden transition-all duration-500 relative"
600600
style={{
601-
background: '#2A0E14',
602-
borderRadius: 2,
601+
background: '#0A0A0B',
602+
borderRadius: 20,
603603
boxShadow:
604-
'0 0 0 1px #C8A255 inset, 0 0 0 5px #2A0E14, 0 0 0 6px #C8A25566, 0 30px 60px -30px rgba(0,0,0,0.7)',
604+
'inset 0 0 0 1px rgba(255,255,255,0.08), 0 30px 60px -30px rgba(0,0,0,0.7)',
605605
}}
606606
>
607-
{/* subtle gilt damask dots */}
607+
{/* aurora mesh */}
608+
<div
609+
className="absolute inset-0 pointer-events-none"
610+
style={{
611+
background:
612+
'radial-gradient(45% 35% at 20% 15%, rgba(197,242,75,0.18), transparent 70%), radial-gradient(40% 30% at 80% 85%, rgba(236,72,153,0.12), transparent 70%), radial-gradient(35% 25% at 85% 15%, rgba(56,189,248,0.1), transparent 70%)',
613+
filter: 'blur(30px)',
614+
}}
615+
/>
616+
{/* dotted grid */}
608617
<div
609618
className="absolute inset-0 pointer-events-none"
610619
style={{
611620
backgroundImage:
612-
'radial-gradient(circle at 25% 25%, rgba(200,162,85,0.08) 1px, transparent 2px), radial-gradient(circle at 75% 75%, rgba(200,162,85,0.08) 1px, transparent 2px)',
613-
backgroundSize: '36px 36px',
614-
opacity: 0.8,
621+
'radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px)',
622+
backgroundSize: '22px 22px',
623+
maskImage:
624+
'radial-gradient(ellipse at center, black 40%, transparent 85%)',
625+
}}
626+
/>
627+
{/* gradient hairline */}
628+
<div
629+
className="absolute inset-0 pointer-events-none"
630+
style={{
631+
padding: 1,
632+
borderRadius: 20,
633+
background:
634+
'linear-gradient(140deg, rgba(255,255,255,0.14), rgba(255,255,255,0.04) 40%, rgba(197,242,75,0.25))',
635+
WebkitMask:
636+
'linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0)',
637+
WebkitMaskComposite: 'xor',
638+
maskComposite: 'exclude',
615639
}}
616640
/>
617-
{/* top stage curtain */}
618-
<svg
619-
viewBox="0 0 600 60"
620-
preserveAspectRatio="none"
621-
className="absolute left-0 right-0 top-0 pointer-events-none"
622-
style={{ height: 30 }}
623-
aria-hidden
624-
>
625-
<rect x="0" y="0" width="600" height="9" fill="#5A0F18" />
626-
<rect x="0" y="8" width="600" height="1" fill="#C8A255" />
627-
{Array.from({ length: 6 }).map((_, i) => {
628-
const x = i * 100;
629-
const drop = 30 + (i % 2) * 8;
630-
return (
631-
<g key={i}>
632-
<path
633-
d={`M${x} 9 Q${x + 50} ${drop}, ${x + 100} 9 L${x + 100} 0 L${x} 0 Z`}
634-
fill="#7E1A24"
635-
/>
636-
<circle cx={x + 50} cy={drop - 2} r="1.5" fill="#C8A255" />
637-
</g>
638-
);
639-
})}
640-
</svg>
641641

642-
<div className="space-y-8 relative z-10 mt-6">
642+
<div className="space-y-8 relative z-10">
643643
<div
644644
className="w-16 h-16 flex items-center justify-center transition-all duration-500"
645645
style={{
646-
background: 'rgba(200,162,85,0.1)',
647-
color: '#C8A255',
648-
borderRadius: 2,
649-
border: '1px solid #C8A25566',
646+
background: 'rgba(197,242,75,0.08)',
647+
color: '#C5F24B',
648+
borderRadius: 14,
649+
border: '1px solid rgba(197,242,75,0.28)',
650650
}}
651651
>
652-
<MaskHappyIcon size={32} weight="regular" />
652+
<SparkleIcon size={30} weight="regular" />
653653
</div>
654654
<div className="space-y-4">
655655
<div
656-
className="text-[10px] uppercase tracking-[0.3em]"
656+
className="text-[10px] uppercase tracking-[0.28em] flex items-center gap-2"
657657
style={{
658-
color: '#C8A255',
659-
fontFamily: "'Cinzel', serif",
658+
color: '#A1A1AA',
659+
fontFamily: "'JetBrains Mono', monospace",
660660
}}
661661
>
662-
Grand Théâtre · MMXXVI
662+
<span
663+
className="h-1.5 w-1.5 rounded-full"
664+
style={{ background: '#C5F24B', boxShadow: '0 0 8px rgba(197,242,75,0.5)' }}
665+
/>
666+
Composer · v2026.1
663667
</div>
664668
<h3
665-
className="text-5xl italic leading-none tracking-tight"
669+
className="text-6xl italic leading-none tracking-[-0.02em]"
666670
style={{
667-
fontFamily: "'Playfair Display', serif",
668-
color: '#F0E4C8',
669-
textShadow: '0 2px 0 #1A0609, 0 4px 16px rgba(200,162,85,0.3)',
671+
fontFamily: "'Fraunces', serif",
672+
fontVariationSettings: "'opsz' 144, 'SOFT' 20, 'WONK' 0",
673+
color: '#F5F5F4',
670674
}}
671675
>
672-
Libretto
676+
Prose<span style={{ color: '#C5F24B' }}>.</span>
673677
</h3>
674678
<p
675-
className="text-sm italic leading-relaxed"
679+
className="text-sm leading-relaxed"
676680
style={{
677-
fontFamily: "'Playfair Display', 'EB Garamond', serif",
678-
color: 'rgba(240,228,200,0.75)',
681+
fontFamily: "'Instrument Sans', sans-serif",
682+
color: '#A1A1AA',
679683
}}
680684
>
681-
Opera program in velvet and gilt. Stage-curtain pelmet,
682-
gold tassels, parchment acts, Playfair italic with
683-
Cinzel capitals.
685+
2026 writing-tool aesthetic. Off-black canvas, a single
686+
electric-lime accent, drifting aurora gradient, Fraunces
687+
italic where the type does the talking.
684688
</p>
685689
</div>
686690
</div>
687691
<div
688-
className="mt-12 pt-8 flex justify-between items-center relative z-10 border-t"
689-
style={{ borderColor: '#8A6B2F' }}
692+
className="mt-12 pt-8 flex justify-between items-center relative z-10"
693+
style={{ borderTop: '1px solid rgba(255,255,255,0.08)' }}
690694
>
691695
<span
692-
className="text-[10px] uppercase tracking-[0.3em]"
696+
className="text-[10px] uppercase tracking-[0.28em] flex items-center gap-2"
693697
style={{
694-
color: '#C8A255',
695-
fontFamily: "'Cinzel', serif",
698+
color: '#C5F24B',
699+
fontFamily: "'JetBrains Mono', monospace",
696700
}}
697701
>
698-
Act I · Scena Prima
702+
start composing
699703
</span>
700704
<ArrowRightIcon
701705
className="group-hover:translate-x-2 transition-all"
702706
size={24}
703-
style={{ color: '#C8A255' }}
707+
style={{ color: '#C5F24B' }}
704708
/>
705709
</div>
706710
</motion.div>

0 commit comments

Comments
 (0)