i'm a software engineer based in the philippines, driven by curiosity and whatever i find interesting. i learn fast with the caveat of goldfish memory (which i call my context lol) and i'm usually self-motivated that i forget to eat.
this is not like other portfolios. feel free to have a look around and explore what makes me, me.
drag cork to move.
drag notes to rearrange.
use +/− or pinch-wheel to zoom.
click one to open.
@schmayterling
open githubrecruiter?
(follow the red line) →product work, public-service software, developer tools, infrastructure, reverse engineering, open source.
no final form. no portfolio template. this board changes when attention changes.
scattered screenshots
dozens of windows
half-finished checklists
constant switching
organized by gravity, not category.
memory system, subsystem model, weeks of neuroscience papers.
someone else is
on the other end.
i enjoy writing code.
if ai solves every problem,
what's left?same circle. over and over.
less interested in
whether it's good—
diffusion models
structural code intelligence for developers and agents, with answers grounded in the repository graph.
an experimental memory layer for long-running agents, state tracking, and better recall.
892 commits. the personal AI agent i've been trying to build since 2023 is finally becoming something i'm proud of.
AI makes me faster. It also might be making me dumber. I'm figuring out where the line is.
apple introduced liquid glass at WWDC 2025. i want to understand how it actually works and figure out if it's possible to recreate it on the web.
unfolding paper…
wfd / Feb 28, 2026 / 9 min
apple showed off liquid glass at WWDC 2025 and it immediately split the internet. half the people loved it, the other half couldn't read their phone anymore. both sides had a point.
i'm less interested in whether it's a good design choice and more interested in how it works. the effect is non-trivial. it goes well beyond glassmorphism with backdrop-filter: blur() into a multi-layered rendering pipeline that bends light through a simulated glass surface in real time.
i want to recreate it on the web.
Stub i haven't finished writing this yet. i publish drafts early as part of WFD 17.
apple calls it a "digital meta-material." it dynamically bends and shapes light like physical glass while moving fluidly like liquid. the WWDC session breaks it into several layers:
| layer | what it does |
|---|---|
| highlights | respond to environmental lighting and device motion. lights move through 3D space. |
| shadows | adjust opacity based on what's behind them. darker over text, lighter over solid backgrounds. |
| tinting | continuously adapts. flips between light and dark based on the content underneath. |
| lensing | the core innovation. background elements are warped through refraction instead of blurred. |
| illumination | interactive feedback that spreads from your fingertip through the element. |
the key difference from glassmorphism is lensing. previous apple materials scattered light (blur). liquid glass bends it. when you look at a button, the content behind it is displaced and warped as if you're looking through a curved piece of real glass. the displacement follows the shape's geometry, the surface curvature, and snell's law of refraction.
in plain english imagine holding a magnifying glass over your phone screen. the content behind it warps and shifts as you move it around. liquid glass does that in software for every button, tab bar, and sidebar in the OS. the glass shape determines how the content warps, and the system adjusts the colors and lighting to make it look physically convincing.
AlexStrNik's ShatteredGlass reverse-engineered the macOS implementation. the layer hierarchy is an exploded stack of compositing passes, each handling a different aspect of the effect:
about this visualization the visualization above is a conceptual decomposition of the rendering pipeline. in the actual native implementation, shadow, blur, refraction, and tint are all handled by a single
glassBackgroundCAFilter on one CABackdropLayer in a single GPU pass. the visualization separates them into individual planes so you can see what each stage contributes to the final composite.
Three.js has no access to the browser's paint layer, so the shader layers above sample a static background image instead of the actual page content behind the element. the composited view approximates liquid glass visually, but the per-layer behavior when exploded is illustrative and simplified.
drag the slider to separate the layers. the native hierarchy from ShatteredGlass:
SwiftUI.SDFLayer (container)
├── CABackdropLayer ("@0")
│ ├── glassBackground CAFilter
│ │ (shadow, blur, refraction, face tint, bleed — all in one filter)
│ └── CASDFLayer ("@0") + CASDFElementLayer (defines the shape)
├── CASDFLayer ("@1") + CASDFGlassHighlightEffect (edge lighting, 45°)
│ └── vibrantColorMatrix filter
└── CASDFLayer ("@2") + CASDFGlassHighlightEffect (edge lighting, -135°)
└── vibrantColorMatrix filter
the important bits:
glassBackground CAFilter on the CABackdropLayer handles refraction, blur, shadow, face tint, and bleed in one GPU pass. the visualization above splits these into separate layers for clarity.CASDFGlassHighlightEffect layers add directional edge highlights at opposite angles (45° and -135°), each with its own vibrantColorMatrix filter for tonal adjustment.apple does this without ray tracing. it's closer to a screen-space refraction shader that uses the SDF normal to compute displacement. chromatic aberration (dispersion) emerges from sampling each color channel at slightly different refracted positions within the same shader. the GPU does all the heavy lifting.
the dday.it analysis confirms this: "it is the first time that a design language relies on some instructions of the graphic processor with shaders specifically developed to process a type of effect that is not at all trivial." they also note it responds to the accelerometer and gyroscope for light direction.
the core visual effect is refraction. when light passes from air into glass, it bends. the relationship is described by snell's law:
n1 * sin(theta1) = n2 * sin(theta2)
for a glass surface with refractive index ~1.5, light bends toward the normal when entering the glass. the amount of bending depends on the angle of incidence, which depends on the surface curvature at that point.
mws did an optically correct GLSL implementation from first principles. the approach:
dFdx/dFdy in GLSL)the displacement is always inward for convex surfaces (which is what apple uses). this means the background content inside the glass shape appears slightly magnified at the center and displaced at the edges.
in plain english for each pixel on screen, the shader asks: "how far am i from the edge of this rounded rectangle?" if you're near the edge, the glass surface is curved there, so the shader looks up the background at a shifted position instead of straight through. the result is that content near the edges gets pushed inward while the center stays mostly in place. that's the "lensing" look.
kube.io explored four surface functions:
| surface | shape | effect |
|---|---|---|
| convex circle | spherical dome | sharp refraction edges, magnification in center |
| convex squircle | apple's preferred shape | smoother transitions, optically thinner bezel |
| concave | bowl-like depression | rays diverge outward (not used by apple) |
| lip | convex rim + concave center | used for switches and toggles |
apple uses the squircle profile. it's smoother than a circular arc and keeps refraction gradients consistent even when stretched into rectangles.
this is where it gets interesting. there are several ways to approach liquid glass on the web, each with real tradeoffs.
kube.io built the most technically rigorous CSS/SVG implementation. the idea:
<feDisplacementMap> in an SVG filter to apply the refractionbackdrop-filter: url(#filter-id)the catch is that backdrop-filter with SVG filters only works in Chrome. safari and firefox don't support this combination. the displacement map is also limited to 8-bit channels (256 values per axis), capping the precision, and any shape/size change requires rebuilding the entire displacement map.
specy took a different route:
html2canvas to screenshot the page (the "paint layer")position: fixedthey published a React library for this.
OverShifted built a standalone OpenGL shader that uses SDF-based refraction with blur, noise, and glow. the approach works but the resource usage is heavy.
mws's shadertoy implementation is the most physically accurate. it computes refraction from first principles using the SDF normal and GLSL's built-in refract() function. it adds reflection and shadow (neither physically correct, but visually convincing).
the problem mws notes: curvature discontinuity at the bevel-to-flat transition creates sharp visual artifacts. apple avoids this through careful surface function design. "apple has an extreme hate for curvature discontinuity."
specy put it plainly: we don't have access to the paint layer. in native iOS, the GPU has direct access to the rendered content behind any element. on the web, CSS and JavaScript cannot read the pixels behind an element unless you hack around it with screenshots.
SVG filters are the exception. <feDisplacementMap> with SourceGraphic gets you access to the paint layer, but only within the constraints of the SVG filter pipeline. custom shaders and arbitrary per-pixel operations are off the table. you get displacement and blending and that's about it.
the html2canvas approach works as a workaround for demos, but falls short for production UI. it's expensive, async, and drifts out of sync with the real page.
the dday.it article goes further: "there is no Liquid Glass for the web, and it is not possible in any way to replicate the same effect using CSS."
in plain english on iOS, the system can peek at the pixels behind any button and warp them through a glass shader in real time. browsers don't let JavaScript do that. CSS can blur what's behind an element (
backdrop-filter), but it can't bend or distort it. every web recreation has to work around this by taking a screenshot of the page and feeding it to a shader manually, which is slow and fragile.
backdrop-filter: blur()i want to build a focused recreation scoped to specific use cases. the plan:
MeshTransmissionMaterialthe interactive visualizations are the more interesting output. a ray diagram you can drag. a surface function you can tweak. a displacement map you can watch being generated. the kind of thing that makes the math tangible.
haven't built any of this yet. this WFD will be updated as the implementation progresses.