Crowdfund Flask
A fundraiser where the total is honey in a flask. It pours to the share raised on first view and counts the pounds on its enamel patch; every reward backed pours a little more in.
Built with Vessel
What it is for
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.
Everything you set here is what the Code and Prompt tabs give you.
Seats open in 11 days. Want one email that morning?
Datasheet
- Mechanism
- Poured total, Volume true meter, Reward radio fieldset, Pledge pours in, Sticky stage, Container query layout, Palette tokens from one table
- Stack
- Vanilla ES modules, CSS, Canvas 2D
- Needs
- Vessel
- States
- 10 documented
- Version
- 0.1.0
- Licence
- With a Pass
States
- 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.
- ChoosingRewards are real radio inputs in a fieldset; the chosen card lifts and rings and the button names its price.
- BackingThe pledge pours into the flask; the total, percentage, backers and the reward's count update, and a polite status line thanks the backer.
- Sold outA limited reward backed to zero reads “All claimed”, is disabled and cannot be backed.
- TappedA tap on the flask sends a slow, heavy ripple across the honey.
- 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.
- TabletOne column: the flask beside its totals above the campaign; rewards two by two.
- PhoneThe stage stacked, stats in three equal columns, rewards in one column, a full-width button.
- Reduced motionNo pour: the flask shows the true level at once and each pledge lands instantly; every number and message still updates.
- Off screenThe flask's loop pauses; the block has no timer or loop of its own.
Notes
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.
Anatomy
Poured total, Volume true meter, Reward radio fieldset, Pledge pours in, Sticky stage, Container query layout, Palette tokens from one table
Usage notes
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.
Options
| Option | Type | Description |
|---|---|---|
| org | text | Organisation |
| place | text | Who and where |
| kicker | text | Kicker |
| headline | text | Headline |
| lede | text | Lede |
| raised | number | The flask pours to this share of the goal on first view. |
| goal | number | A full flask. |
| stretch | number | Set it to the goal to have none. |
| stretchNote | text | Stretch goal buys |
| backers | number | Backers |
| daysLeft | number | Days left |
| deadline | text | Deadline |
| currency | enum | Currency |
| tier | enum | The tier chosen when the page opens. |
| palette | enum | A workshop in daylight, or the stall after dark. |
| finish | enum | Flask markings |
| light | number | Light from (degrees) |
Methods
- vessel
- raised
- pledge
- update
- destroy
How it works
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.