Summary

Add an option for letting confetti fall through the bottom of the viewport.

Review Request #15094 — Created June 5, 2026 and submitted June 24, 2026, 11:53 p.m.

Information

Owner

maubin

Repository

Review Board

Branch

release-8.x

Bugs

Depends On

Reviewers

Groups

reviewboard

People

Description

This adds an option to remove the bottom of the viewport as a mandatory
platform. When this is set, pieces will fall through the bottom of the
viewport instead of landing on it. This is useful when adding confetti
to pages that have a vertical scroll, when you scroll the confetti ends
up looking like its floating on the page.

This change also switches the position of the canvas that holds the
confetti from fixed to absolute, so that confetti sticks onto the
platform it landed on when the page scrolls, instead of being sticky to
the viewport when scrolling.

Testing Done

Saw that behavior was normal with the option disabled, and that
confetti falls through the the bottom of the viewport when the option
is set.

Commits

Summary	ID
Add an option for letting confetti fall through the bottom of the viewport. This adds an option to remove the bottom of the viewport as a mandatory platform. When this is set, pieces will fall through the bottom of the viewport instead of landing on it. This is useful when adding confetti to pages that have a vertical scroll, when you scroll the confetti ends up looking like its floating on the page. This change also switches the position of the canvas that holds the confetti from fixed to absolute, so that confetti sticks onto the platform it landed on when the page scrolls, instead of being sticky to the viewport when scrolling.	0451acc5a4463427526f1a9307f20206b5ffc6c0

Summary

Add an option for letting confetti fall through the bottom of the viewport.

This adds an option to remove the bottom of the viewport as a mandatory platform. When this is set, pieces will fall through the bottom of the viewport instead of landing on it. This is useful when adding confetti to pages that have a vertical scroll, when you scroll the confetti ends up looking like its floating on the page. This change also switches the position of the canvas that holds the confetti from fixed to absolute, so that confetti sticks onto the platform it landed on when the page scrolls, instead of being sticky to the viewport when scrolling.

0451acc5a4463427526f1a9307f20206b5ffc6c0

Issues

Description	From	Last Updated
Can you check what happens if confetti is triggered when the scroll position is not at the top?	david	June 22, 2026, 2:57 a.m.
It's generally nice to keep flags in a positive state, like floorEnabled, so that it's consistent what a true or …	chipx86	June 5, 2026, 4:09 a.m.
Would it make sense to conditionally create or not create #floor based on the flag, and then check that instead?	chipx86	June 5, 2026, 4:21 a.m.
Can you alphabetize here?	david	June 22, 2026, 9:39 p.m.
This could just become } else if (...) { and save a level of nesting.	david	June 22, 2026, 2:59 a.m.
At this point, floor is null. This ends up being a no-op, and we'll continue processing it, accelerating forever off-canvas. …	david	June 22, 2026, 9:20 p.m.

flake8 passed.

JSHint passed.

reviewboard/static/rb/js/ui/views/confettiView.ts (Diff revision 1)

The issue has been resolved. Show all issues

It's generally nice to keep flags in a positive state, like floorEnabled, so that it's consistent what a true or a false means. Can we invert this one?

This should also sort alphabetically below the ms.

reviewboard/static/rb/js/ui/views/confettiView.ts (Diff revision 1)

The issue has been resolved. Show all issues

Would it make sense to conditionally create or not create #floor based on the flag, and then check that instead?

Commits:

	Summary	ID
	Add an option for letting confetti fall through the bottom of the viewport. This adds an option to remove the bottom of the viewport as a mandatory platform. When this is set, pieces will fall through the bottom of the viewport instead of landing on it. This is useful when adding confetti to pages that have a vertical scroll, when you scroll the confetti ends up looking like its floating on the page. This change also switches the position of the canvas that holds the confetti from fixed to absolute, so that confetti sticks onto the platform it landed on when the page scrolls, instead of being sticky to the viewport when scrolling.	531a04c9b941e660c7014ca2a1ff7f2bbca7689e
	Add an option for letting confetti fall through the bottom of the viewport. This adds an option to remove the bottom of the viewport as a mandatory platform. When this is set, pieces will fall through the bottom of the viewport instead of landing on it. This is useful when adding confetti to pages that have a vertical scroll, when you scroll the confetti ends up looking like its floating on the page. This change also switches the position of the canvas that holds the confetti from fixed to absolute, so that confetti sticks onto the platform it landed on when the page scrolls, instead of being sticky to the viewport when scrolling.	67b9f80e14ace73e400dcae2a89dae8527bd4e3e

Diff:

Revision 2 (+114 -46)

Show changes

reviewboard/static/rb/js/ui/views/confettiView.ts

Checks run (2 succeeded)

flake8 passed.

JSHint passed.

The issue has been dropped. Show all issues

Can you check what happens if confetti is triggered when the scroll position is not at the top?

maubin

June 22, 2026, 9:43 p.m.

The confetti still pops and lands normally on platforms. The pieces that fall through the floor will dissapear at the spot where the floor is, like in this GIF. It looks like it dissapears into nothingness, but I think that's fine. It would be harder to get it to fall completely to the end of the page, we'd have to make the canvas size the same height as the full scrollable page, which is what I was having trouble with in the first place and why I decided to let the confetti fall through instead of land on the floor.

reviewboard/static/rb/js/ui/views/confettiView.ts (Diff revision 2)
The issue has been resolved. Show all issues
```
This could just become } else if (...) { and save a level of nesting.
```

reviewboard/static/rb/js/ui/views/confettiView.ts (Diff revision 2)

The issue has been resolved. Show all issues

At this point, floor is null. This ends up being a no-op, and we'll continue processing it, accelerating forever off-canvas.

Can we add a new fellThrough state that we set here, and then in the frame loop we can check if (!piece.landedOn && !piece.fellThrough) ?

reviewboard/static/rb/js/ui/views/confettiView.ts (Diff revision 2)

The issue has been resolved. Show all issues

Can you alphabetize here?

Commits:

	Summary	ID
	Add an option for letting confetti fall through the bottom of the viewport. This adds an option to remove the bottom of the viewport as a mandatory platform. When this is set, pieces will fall through the bottom of the viewport instead of landing on it. This is useful when adding confetti to pages that have a vertical scroll, when you scroll the confetti ends up looking like its floating on the page. This change also switches the position of the canvas that holds the confetti from fixed to absolute, so that confetti sticks onto the platform it landed on when the page scrolls, instead of being sticky to the viewport when scrolling.	67b9f80e14ace73e400dcae2a89dae8527bd4e3e
	Add an option for letting confetti fall through the bottom of the viewport. This adds an option to remove the bottom of the viewport as a mandatory platform. When this is set, pieces will fall through the bottom of the viewport instead of landing on it. This is useful when adding confetti to pages that have a vertical scroll, when you scroll the confetti ends up looking like its floating on the page. This change also switches the position of the canvas that holds the confetti from fixed to absolute, so that confetti sticks onto the platform it landed on when the page scrolls, instead of being sticky to the viewport when scrolling.	0451acc5a4463427526f1a9307f20206b5ffc6c0

Diff:

Revision 3 (+122 -50)

Show changes

reviewboard/static/rb/js/ui/views/confettiView.ts

Checks run (2 succeeded)

flake8 passed.

JSHint passed.

Ship it!

```
Ship It!
```

Status:: Completed
Change Summary:: Pushed to release-8.x (c23f345)