I am the builder of these three tools. The 2nd Floor Marketplace itself is owned by a separate party whose full details I am not authorized to disclose. What I have been given disclosure rights for are the three partnership-facing tools I built for it — The Orb Partnerships Portal, Be Featured on The 2nd Floor Marketplace, and Partnership By Donations. Everything that follows is drawn entirely from that scope.
The problem this solved was a specific one: a platform with a defined editorial identity needed an entry point that felt proportionate to what the platform is. Brand partnership pages are transactional by default — a rate card, a contact form, a list of packages. That approach was never considered here.
The Orb was built on a single premise: the entry point to a curated platform should feel like the platform itself. It did not begin as a navigation element. It began as a question — what should the first thing a brand encounters actually feel like?
The answer built itself around a single white sphere on a white background — background: #ffffff against background-color: #ffffff — so that the orb and the world it floats in are the same material. There is no contrast. There is only the neumorphic shadow pressing light into form: 40px 40px 80px #d8d8d8, -30px -30px 70px #ffffff. The sphere exists not because it stands apart from the page, but because it is shaped differently than the silence around it.
Inside, four blobs move through a gooey SVG filter — feGaussianBlur stdDeviation="22" collapsing into feColorMatrix alpha 32 -16 — so their boundaries dissolve and reform continuously, like something alive that does not know it is being watched. The tide blob is the most deliberate of the four: it holds compressed at translate(0, -185px) scale(1, 0.45) for 35% of its 12-second cycle. Flat. Patient. Waiting. Then it surges — translate(0, 80px) scale(1.7, 1.3) on a cubic-bezier(0.45, 0.05, 0.55, 0.95) — and the whole interior of the orb shifts. The orb breathes because something inside it moves with intent, not randomness.
The word PARTNERSHIPS sits at the center behind a glass lens — radial-gradient at 35% 35%, a ::before highlight rotated −25deg — and refracts through an feTurbulence displacement map oscillating between 0.012 and 0.008 baseFrequency over 12 seconds. The word is present. It is also never completely still — shifting at a frequency too slow to track consciously and fast enough to feel. Which is the correct speed for a word like partnerships.
When you tap the orb, it doesn't navigate — it collapses to scale: 0.15, opacity: 0. The Powered by Barb The Builder signature fades with it. Two choice bubbles bloom outward from scale: 0.3 into full presence — Donation to the left at translate(−220px), Featured to the right at translate(220px) — both on a cubic-bezier(0.19, 1, 0.22, 1) that decelerates like something settling after flight. On mobile, the spread tightens to ±115px without losing the physics. The iOS gray tap flash is suppressed globally. Four lines of JavaScript manage the entire experience. One classList.add. One classList.remove. Everything else is CSS doing the work of consequence.
Four lines of JavaScript choreograph the entire experience. Everything else is CSS and SVG. The engineering constraint was also the aesthetic commitment.
The origin of this tool is a recognition that health and wellness marketplaces are among the most visually generic spaces on the internet. A marketplace with genuine curatorial intent needed an entrance that communicated caliber before a single product was listed — and a booking interface that matched that standard. This tool was built before the catalog was full. That was deliberate.
The right bubble from the Orb resolves to a two-panel interface — and the first thing it renders is a smartphone. Not an illustration of one. A CSS-built one: 300×600px, border-radius: 36px, border: 12px solid #000, a ::after notch 50×4px centered at the top. Inside it, a live preview of the exact placement grid a brand is about to book into.
The grid is six slots arranged in a Tetris logic — two standard squares, one full-width large square spanning both columns, one wide horizontal banner, two smaller squares at the base — each priced differently, from ₱2,500 to ₱6,000. Price tooltips surface on hover via ::after content: attr(data-price) — zero JavaScript, pure CSS attribute binding — in #388E3C green. The visual logic is immediate: you can see exactly where your brand would sit before you commit to anything.
Wellness content platforms that sell brand placements have no purpose-built tool for managing them. Neither a generic booking platform nor a manual process handles competitive booking dynamics or communicates the actual value of a placement. This does both.
Beside the smartphone, the booking form. A placement selector comes first — because nothing else unlocks until a slot is chosen. Select a slot, and the form fetches live availability from a Google Apps Script endpoint, querying a Google Sheet that the platform operator controls. The response returns two arrays: fullyBooked dates, which are disabled in the Flatpickr calendar entirely, and pencilBooked dates, which are flagged .pencil-booked in amber #ff9800 via the onDayCreate callback — visible, selectable, but carrying a warning. If a brand picks a pencil-booked date and clicks Secure My Spot, window.confirm() fires one direct question: Pay immediately to outbid? No softening. No procedure. A decision.
On confirmation, four fields — placement, brand name, category, date — are encodeURIComponent() encoded and injected directly into a pre-filled Google Form URL, which opens in a new tab with the brand's details already populated. Ten wellness categories are available, each described with enough specificity that a brand knows exactly where it belongs before it selects.
No dedicated server. No database. Google Workspace is the entire backend. The philosophy here is structural honesty — self-service booking with zero manual intake from the platform operator, because a platform that claims to value brands' time should not waste it on back-and-forth. The smartphone in the interface is not decorative — it is the reminder that this placement will live on a content platform, seen on a screen, in someone's hand.
This one carries a different weight than the other two. The problem it was built to solve is not logistical — it is philosophical.
Small wellness brands are priced out of most marketplace listing structures before they can prove their products. Listing fees, commissions, and minimum commitments are built for established players. They price out exactly the brands a curated wellness marketplace would most want to discover. The donation-based model inverts that. It asks brands to lead with giving — donation-based listing, no fees, no commissions, automatic activation.
The left bubble from the Orb leads here. And the page opens on two words: Be seen. Playfair Display serif at 60px, weight 400 — the italic seen in #97C459, the same green that threads through every living element on this page. Behind the headline, the word seen again as ghost text at font-size: 130px, opacity: 0.06. The largest typography on the page is nearly invisible. That is the condition the page was built to change.
And the page itself was built to that same standard of honesty. Directly below the hero: a section titled What you won't pay. Three line items, each carrying text-decoration: line-through in text-decoration-color: #c0b89a. Listing fees. Monthly charges. Commissions. Each preceded by a small circle with a single horizontal dash — not a checkmark, not a cross — rendered in CSS alone. The struck-through list is not rhetorical. It names the exact structure that prices small brands out, and crosses each item out by name. Because naming what is absent is as important as naming what is present.
Then three steps, numbered in Playfair Display #97C459 at 30px. Make a donation — any amount, pay what feels right. Fill out the form. You're listed instantly, automatically, no waiting, no approval. The Google Form link is live. The process described in the copy is the actual process in the code.
The tagline — Simple. Fair. Intentional. — sits in Playfair Display on deep forest #1e3812, and below it: a procedurally generated landscape built entirely as DOM nodes at DOMContentLoaded. No canvas. No images. A living garden, generated fresh every time the page loads.
Twelve buildings are hand-specified with exact x positions, widths, heights, and window grids — each window's opacity randomized between 0.06 and 0.65 at runtime, so no two page loads produce the same lit skyline. Five trees carry individual trunk, lower canopy, and canopy-top elements on their own sway or sway2 animations at different durations and phase offsets — 4s, 5s, 4.5s, 5.5s, 3.8s — so they never synchronize. Three vines descend from the top of the scene at x: 160, 310, 470, each a flex-column stem with alternating left and right leaves rocking on transform-origin: top center at staggered durations and delays. Seventeen grass blades grow at individually specified positions, each with a randomized height between 8px and 16px and a randomized animation delay, so the ground breathes unevenly the way real ground does.
Five birds cross the sky. Each one is constructed by birdSVG() — a body ellipse, a beak built from two smaller ellipses, two wings drawn with quadratic Bézier paths — in three shades of platform green: #97C459, #c0dd97, #7aaa40. Left-flying birds are mirror-flipped with scale(-1,1) translate(-32,0). They fly at different heights, different durations between 16s and 25s, different delays between 0s and 12s. They do not flock. They pass each other without acknowledgment — which is how birds actually move.
The page closes on: Your brand belongs here. One button — Get listed now — in #27500A on #EAF3DE, linking directly to the Google Form. No intermediary. No review process. No waiting room. No gatekeeping dressed as curation. Donate. Fill the form. You're in.
The listing activates automatically because the page that describes that promise was built to the same standard of honesty it asks brands to trust. A page that believes in small brands should itself be built with the same care a small brand would give to its own work.