[landing] introduce glow effect for hero image
ClosedPublic
Actions

Authored by ginsu on Jun 2 2023, 11:43 AM.

Details

Reviewers

atul
kamil

Commits

rCOMM4ce9fdc9d7c9: [landing] introduce glow effect for hero image

Summary

When I was rebuilding the new hero section, I decided to remove the glow effect from the hero image. I did this for a lot of reasons, but mainly removing this effect from the image asset made the image a lot more clear. I think the glow effect is still great, so I added it back in as a div element. Please see the designs for context

Screenshot 2023-06-02 at 11.51.55 AM.png (1×3 px, 2 MB)

Screenshot 2023-06-02 at 11.51.24 AM.png (1×3 px, 2 MB)

Depends on D8075

Test Plan

Please look at the demo videos/screenshots below

Desktop/Responsive:

Tablet:

Screenshot 2023-06-02 at 2.45.37 PM.png (2×3 px, 1 MB)

Mobile:

Screenshot 2023-06-02 at 2.45.21 PM.png (2×3 px, 1 MB)

Diff Detail

Repository

rCOMM Comm

Lint

No Lint Coverage

Unit

No Test Coverage

Event Timeline

ginsu created this revision.Jun 2 2023, 11:43 AM

Herald added subscribers: tomek, ashoat. · View Herald TranscriptJun 2 2023, 11:43 AM

ginsu edited the summary of this revision. (Show Details)Jun 2 2023, 11:47 AM

ginsu edited the test plan for this revision. (Show Details)

ginsu added reviewers: atul, kamil.

ginsu attached a referenced file: F569670: Screenshot 2023-06-02 at 2.45.21 PM.png. (Show Details)

ginsu attached a referenced file: F569669: Screenshot 2023-06-02 at 2.45.37 PM.png. (Show Details)

ginsu attached a referenced file: F569663: Screen Recording 2023-06-02 at 2.44.55 PM.mov. (Show Details)

ginsu attached a referenced file: F569661: Screenshot 2023-06-02 at 11.51.24 AM.png. (Show Details)

ginsu attached a referenced file: F569662: Screenshot 2023-06-02 at 11.51.55 AM.png. (Show Details)

ginsu added inline comments.Jun 2 2023, 11:54 AM

landing/landing.css
48–49 ↗	(On Diff #27411)	These values were derived from a lot of trial and error and seeing what looked best. Essentially these values along with `top` and `left` center this ellipsis shaped div within the macbook, and from that center we spread out to create this glow/blur effect
82–83 ↗	(On Diff #27411)	Went with percentage units here since the image will shrink a little as the width of the screen decreases, so I wanted to make sure the glow effect had a similar behavior

ginsu edited the summary of this revision. (Show Details)Jun 2 2023, 11:58 AM

ginsu added a parent revision: D8075: [landing] redesign hero section layout.

ginsu added a child revision: D8077: [landing] move hero section code into own component.

Harbormaster completed remote builds in B19994: Diff 27411.Jun 2 2023, 12:00 PM

ginsu requested review of this revision.Jun 2 2023, 12:00 PM

Maybe glow instead of blur? Kind of associate blur with being some sort of "filter" "above" some other content

atul added inline comments.Jun 2 2023, 12:19 PM

landing/landing.css
54 ↗	(On Diff #27411)	Have a hunch that box-shadow would be more performant than blur since it doesn't care about layers below? Looks like ChatGPT agrees, but obviously grain of salt w/ that.

atul attached a referenced file: F569756: a3351f.png. (Show Details)Jun 2 2023, 12:19 PM

change name from blur to glow

Looks good overall, might be worth trying box-shadow instead of blur if it's easy... but feel free to land as-is if it takes too long to investigate + achieve the same effect

This revision is now accepted and ready to land.Jun 2 2023, 12:21 PM

ginsu retitled this revision from [landing] introduce blur effect for hero image to [landing] introduce glow effect for hero image.Jun 2 2023, 12:22 PM

ginsu edited the summary of this revision. (Show Details)

Harbormaster completed remote builds in B19998: Diff 27415.Jun 2 2023, 12:38 PM

ginsu mentioned this in D8080: [landing] introduce request access compoonent.Jun 2 2023, 1:14 PM

rebase before landing

Harbormaster completed remote builds in B21636: Diff 29682.Aug 8 2023, 2:00 PM

Closed by commit rCOMM4ce9fdc9d7c9: [landing] introduce glow effect for hero image (authored by ginsu). · Explain WhyAug 8 2023, 2:08 PM

This revision was automatically updated to reflect the committed changes.

ginsu added a commit: rCOMM4ce9fdc9d7c9: [landing] introduce glow effect for hero image.