themes/glassmorphism.yaml
Rama main · réplica de lectura del repositorio original.
# Glassmorphism — frosted glass panels over blurred colour.
#
# The background is a real plate: translucent coloured blobs blurred behind a
# frosted content panel. Native cards sit on top as a second layer of glass
# (see tokens.shape.card_fill — translucent white), so the blur genuinely
# shows through every panel. Text stays native pptxgenjs.
name: glassmorphism
label: Glassmorphism
summary: Frosted glass panels over blurred colour — translucent, airy, modern.
tokens:
palette:
bg: "#E9EEF6" # calm pale slate
surface: "#FFFFFF" # the frost tone
ink: "#1E2A3A" # deep slate
ink_muted: "#5B6B80"
accent: "#6C5CE7" # violet
accent_alt: "#00CEC9" # teal
rule: "#D4DEEE"
on_accent: "#FFFFFF"
surfaces:
title: { bg: "#1E2A3A", ink: "#FFFFFF", muted: "#B9C5D6", accent: "#00CEC9" }
section: { bg: "#6C5CE7", ink: "#FFFFFF", muted: "#DCD6FF" }
dark:
bg: "#141A24"
surface: "#232E3E"
ink: "#E7EDF5"
ink_muted: "#9AA9BC"
accent: "#8B7CF0"
accent_alt: "#35D6D2"
rule: "#FFFFFF1A"
on_accent: "#FFFFFF"
type:
display: { family: "Space Grotesk", weight: 700, size: 38, line: 1.1, tracking: -0.5 }
heading: { family: "Space Grotesk", weight: 600, size: 29, line: 1.15, tracking: -0.3 }
subhead: { family: Inter, weight: 500, size: 15, line: 1.4, tracking: 0 }
body: { family: Inter, weight: 400, size: 13, line: 1.55, tracking: 0 }
caption: { family: Inter, weight: 500, size: 10, line: 1.35, tracking: 0.2 }
eyebrow: { family: Inter, weight: 600, size: 10, line: 1.2, tracking: 1.2, transform: upper }
stat: { family: "Space Grotesk", weight: 700, size: 52, line: 1.0, tracking: -1 }
grid:
# A little wider than a flat theme: the content box is the inside of the
# plate's panel, which the renderer draws past it on every side, and the
# ground behind has to stay visible. Only a little — `flow`'s vertical
# spine stops fitting its body above the readable floor past about 0.76in,
# so this is the widest step that costs no theme a slide.
margin: { top: 0.66, right: 0.74, bottom: 0.58, left: 0.74 }
gutter: 0.30
columns: 12
band: { eyebrow_y: 0.62, title_y: 1.30, body_y: 2.55 }
shape:
radius: { card: 0.30, pill: 0.40, chip: 0.12 }
border: { width: 1, color: "#FFFFFF80" } # frosted edge, not a hard rule
card_pad: 0.30
# The native panels are the second glass layer over the plate's frost.
card_fill: { color: "#FFFFFF", transparency: 42 }
shadow:
card: { type: outer, blur: 16, offset: 4, angle: 90, color: "1E2A3A", opacity: 0.12 }
# Composition — src/composition.js owns the vocabulary; every axis
# left out here is the shared default.
layout:
title:
composition: centred
section:
composition: centred
heading:
opening: bar
plate:
enabled: true
# The blur belongs to the glass, not to the background.
#
# This used to paint three blobs at 64px blur over stacked radial
# gradients, and then put a frosted panel on top. Frosting a blur leaves
# nothing to frost: the whole slide became fog, which is both why it read as
# "glow" and why it was indistinguishable from the other soft themes.
#
# The shapes behind the glass are now crisp — hard-edged circles and bars in
# the accent colours, no filter on any of them. The only blur in the theme
# is the panel's own backdrop-filter, so a shape is sharp where it crosses
# the ground and soft where it passes behind the panel. That edge, visible
# in the same image, is what the material actually looks like.
html: |
<style>
.ground{position:absolute;inset:0;
background:linear-gradient(155deg, {{tokens.palette.bg}} 0%, {{tokens.palette.rule}} 100%);}
.sh{position:absolute;}
/* Two shapes, each straddling an edge of the panel so the same circle is
sharp on the ground and soft through the glass. Kept faint: at full
strength they read as objects dropped on the slide and compete with
the content. A tint the ground shifts into still shows the sharp/soft
edge, which is the only thing they are there to do. Both stay clear
of the top-right corner, which belongs to the crest. */
.c1{left:-7%;top:22%;width:26%;height:46%;border-radius:50%;
background:{{tokens.palette.accent}};opacity:.24;}
.c2{right:9%;bottom:-16%;width:23%;height:40%;border-radius:50%;
background:{{tokens.palette.accent_alt}};opacity:.22;}
.frost{position:absolute;left:{{panel.x}}px;top:{{panel.y}}px;width:{{panel.w}}px;height:{{panel.h}}px;
border-radius:26px;background:{{tokens.palette.surface}}52;
backdrop-filter:blur(26px) saturate(140%);-webkit-backdrop-filter:blur(26px) saturate(140%);
border:1px solid {{tokens.palette.surface}}a6;
box-shadow:0 16px 48px {{tokens.palette.ink}}26;}
</style>
<div class="ground"></div>
<div class="sh c1"></div><div class="sh c2"></div>
<div class="frost"></div>
surfaces:
title: |
<style>
.ground{position:absolute;inset:0;
background:linear-gradient(155deg, {{tokens.surfaces.title.bg}} 0%, {{tokens.palette.ink}} 100%);}
.sh{position:absolute;}
.c1{right:-5%;bottom:-18%;width:28%;height:52%;border-radius:50%;
background:{{tokens.palette.accent}};opacity:.42;}
.c2{right:22%;top:14%;width:16%;height:28%;border-radius:50%;
background:{{tokens.palette.accent_alt}};opacity:.34;}
/* A full-height pane of glass over the left third, where the title
sits — the shapes go soft behind it and stay sharp beside it. */
.pane{position:absolute;left:0;top:0;width:62%;height:100%;
background:{{tokens.surfaces.title.bg}}59;
backdrop-filter:blur(30px) saturate(130%);-webkit-backdrop-filter:blur(30px) saturate(130%);
border-right:1px solid {{tokens.palette.surface}}2e;}
</style>
<div class="ground"></div>
<div class="sh c1"></div><div class="sh c2"></div>
<div class="pane"></div>
section: |
<style>
.ground{position:absolute;inset:0;
background:linear-gradient(150deg, {{tokens.surfaces.section.bg}} 0%, {{tokens.palette.ink}} 130%);}
.sh{position:absolute;}
.c1{right:8%;bottom:-24%;width:30%;height:56%;border-radius:50%;
background:{{tokens.palette.accent_alt}};opacity:.34;}
.c2{left:52%;top:-18%;width:18%;height:34%;border-radius:50%;
background:{{tokens.palette.surface}};opacity:.14;}
/* The band runs off the left edge and is rounded on the right, so it
reads as a pane the section title rests on rather than a stripe. */
.band{position:absolute;left:0;top:24%;width:72%;height:48%;
border-radius:0 999px 999px 0;
background:{{tokens.palette.surface}}24;
backdrop-filter:blur(26px) saturate(130%);-webkit-backdrop-filter:blur(26px) saturate(130%);
border:1px solid {{tokens.palette.surface}}3d;border-left:none;}
</style>
<div class="ground"></div>
<div class="sh c1"></div><div class="sh c2"></div>
<div class="band"></div>
voice:
feel: airy, modern, translucent, premium software
density: medium
prefers:
- card-based breakdowns
- concise, punchy headlines
- short body text that reads well over frost
avoid:
- dense paragraphs
- more than four cards on one slide
- low-contrast text on busy colour
headline_style: >
Short and direct. Seven words or fewer when you can. "Rendering, Frosted
Glass, One Pipeline" over "An Introduction to the Rendering Pipeline".
body_style: >
Full sentences, but trim. Lead with the claim. No filler, no throat-clearing.