Pies

Prototype parts for ProtoPie.

All Pies

Password visibility toggle and character count detection.

Get Pie

Value slider with custom step amount.

Get Pie

Swipey carousel selector with associated content.

Get Pie

Value verification with auto-focus (multi and single input field).

Get Pie

Quantity stepper with selected value stored and available on separate page.

Get Pie

Value and character extraction with custom styling within a single input field.

Get Pie

Custom incremental number values via scroll.

Get Pie

Dynamic header position based on scroll direction.

Get Pie

Scroll-controlled sticky elements.

Get Pie

Randomized loader displaying different values at each page load.

Get Pie

Text size scaling via slider.

Get Pie

Input autofill via focus or typing any character.

Get Pie

Audio playback and volume control.

Get Pie

Multi-format current date and time.

Get Pie

Native device camera with photo display.

Get Pie

Animation of component instances upon entering viewport.

Get Pie

Dynamic value tied to slider level and position.

Get Pie

Image following cursor position on hover.

Get Pie

Animation of elements linked to scroll position.

Get Pie

360° dial with custom chained value.

Get Pie

Auto-formatted DOB input field.

Get Pie

Dynamic input border via character width.

Get Pie

Text in a variable revealed by character via an interface.

Get Pie

Countdown timer with custom minutes and hours.

Get Pie

Scroll-controlled Safari browser component in light and dark mode; because screen size is not the same as viewport size.

Get Pie

Shopping bag with total stored across pages.

Get Pie

Auto-formatted credit card number and name input with real-time display.

Get Pie

Fixed position text animation on scroll.

Get Pie

Visual interaction tracer with velocity-based size. Desktop cursor or touch device.

Get Pie

Notification display only if user arrives from a specific page.

Get Pie

The amount of times I've mistakenly referred to Ruth Bader Ginsburg as "RGB" is comical at this point.

Get Pie

Fullscreen expandable CTA regardless of position, with z-index reordering to place element on top.

Get Pie

Bonus: App concept with math for those that don't dine alone.

Get Pie

Search query with dynamically-positioned results. indexOf has done a lot of good in this world.

Get Pie

State toggle with absolute value using a single Assign response.

Get Pie

Interaction- and time-based display of scroll bar.

Get Pie

Dynamic selection results based on associated ID or category.

Get Pie

Infinitely looping carousel in which Lovecraft and his friends circle forever.

Get Pie

Text revealed based on "combining" text via scroll.

Get Pie

Slide progress indicated three ways (mask, multi-segment, single segment).

Get Pie

User-entered data concatenated from two sources into a single string elsewhere in the experience.

Get Pie

Audio playback time/progress represented two ways, with seek.

Get Pie

Background color transition via scroll.

Get Pie

Pre-defined text stored and displayed as a message via "typing" anything.

Get Pie

UI and progress indicator driven by video time, with event fired at video end.

Get Pie

Text in a variable again, but revealed by character via the properties of an element.

Get Pie

Mask hover follow with z-index reordering.

Get Pie

Infinite loop with pause on hover. You ever try this without recalculating the speed for mouseout?

Get Pie
P i e s
Download all Pies

zip / 84.4 MB

I often build small one-off pieces of isolated functionality when learning or experimenting with features in ProtoPie; unstyled individual interactions and parts that are more like wireframes, not over-designed complete concepts or experiences.

With a growing backlog of these, I realized that it would be cool to create a consistent collection that exposes some techniques for others to learn from. It’s not a component library nor is it a design system. It’s a variety of dynamic prototype parts, largely driven by expressions/formulas and variables.

For the most part, these are things not possible in Figma, but either way, if you're reaching for ProtoPie for whatever reason, here's how to do stuff.