Crowdfund Flask

Show a crowdfunding total as the thing being made: for a maker's pre-order, a community appeal or a co-op's share offer, the money raised fills a vessel the backer can watch fill, with specific, limited rewards to choose from and one button that visibly adds their pledge.

Copy the crowdfund-flask folder and the vessel folder from its package next to your page, link the stylesheets and mount it on an element. Every option has a default; the lab’s Code tab writes the same example at any settings, and for React, Vue, Svelte or a custom element (Using a framework).

<link rel="stylesheet" href="vessel/vessel.css">
<link rel="stylesheet" href="crowdfund-flask/crowdfund-flask.css">
<div id="crowdfund-flask"></div>

<script type="module">
  import Vessel from './vessel/vessel.mjs';
  import { mount } from './crowdfund-flask/crowdfund-flask.mjs';

  const crowdfundFlask = mount(document.getElementById('crowdfund-flask'), {
    org: 'Common Comb',
    place: 'Beekeepers’ co-operative, Eastmoor',
    kicker: 'Crowdfunding',
  }, { Vessel });

  // crowdfundFlask.update({ … });   change any option in place
  // crowdfundFlask.destroy();        and take it away again
</script>

mount(element, options, { Vessel })

Builds the block inside the element and returns its handle. Hand it the Vessel it is built with.

handle.vessel

handle.raised

handle.pledge(amount)

Land a pledge from code (a real backend's webhook): it pours in.

handle.update(next = {})

Change options in place.

handle.destroy()

Stops it and cleans up after it.

1. First viewThe flask starts empty and pours to the share raised (a honey stream, bubbles carried down, a slow sway) while its readout counts the pounds up; then it sleeps.
2. ChoosingRewards are real radio inputs in a fieldset; the chosen card lifts and rings and the button names its price.
3. BackingThe pledge pours into the flask; the total, percentage, backers and the reward's count update, and a polite status line thanks the backer.
4. Sold outA limited reward backed to zero reads “All claimed”, is disabled and cannot be backed.
5. TappedA tap on the flask sends a slow, heavy ripple across the honey.
6. PaletteMeadow (a workshop in daylight: beeswax paper, brown ink) or hive (the stall after dark, lit by the jars); the glass re-shades itself for the panel.
7. TabletOne column: the flask beside its totals above the campaign; rewards two by two.
8. PhoneThe stage stacked, stats in three equal columns, rewards in one column, a full-width button.
9. Reduced motionNo pour: the flask shows the true level at once and each pledge lands instantly; every number and message still updates.
10. Off screenThe flask's loop pauses; the block has no timer or loop of its own.

Made of: Poured total, Volume true meter, Reward radio fieldset, Pledge pours in, Sticky stage, Container query layout, Palette tokens from one table.

Original composition; Common Comb, Eastmoor, the campaign, its rewards and its backers are invented. Imagery is CSS (a masked honeycomb) and the Vessel's canvas; no photograph. Faces: Young Serif and Bricolage Grotesque (SIL OFL 1.1), Latin subsets as WOFF2.

• 07VesselA glass of liquid as a gauge.

More blocks on the same object:

• 06.4Specimen CaseA bento of glass-topped compartments in a machined case, each holding one real Tactile object running small (the Odometer, the Flip-Dot, the Detent Dial, the Vessel) with an engraved label card under the glass.
• 07.1Reading ProgressA long read with a test tube for a progress bar.
• 07.3Upload VesselA file-import dialog where the upload fills a beaker.