# 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.

Block · With a Pass · https://tactileui.dev/blocks/crowdfund-flask

> The code and styling for this block come with the Pass. Sign in if you have one. Sign in: https://tactileui.dev/auth/sign-in The price: https://tactileui.dev/pricing

## 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

## States

1. **First view**: The 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. **Choosing**: Rewards are real radio inputs in a fieldset; the chosen card lifts and rings and the button names its price.
3. **Backing**: The 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 out**: A limited reward backed to zero reads “All claimed”, is disabled and cannot be backed.
5. **Tapped**: A tap on the flask sends a slow, heavy ripple across the honey.
6. **Palette**: Meadow (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. **Tablet**: One column: the flask beside its totals above the campaign; rewards two by two.
8. **Phone**: The stage stacked, stats in three equal columns, rewards in one column, a full-width button.
9. **Reduced motion**: No pour: the flask shows the true level at once and each pledge lands instantly; every number and message still updates.
10. **Off screen**: The flask's loop pauses; the block has no timer or loop of its own.

## 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.