Shimmer with background

[hshahi]

Hi, Congrats for such amazing features. I was wondering if it is easy to have shimmer but at the same time showing a faded/not faded background so in a way it is like a ghost hovering over the actual last result for example grid result from backend. like a light passing over the background that is showing.

Thanks
Hshahi

[Aejkatappaja]

Hi, Congrats for such amazing features. I was wondering if it is easy to have shimmer but at the same time showing a faded/not faded background so in a way it is like a ghost hovering over the actual last result for example grid result from backend. like a light passing over the background that is showing.

Thanks Hshahi

Thanks, glad you like it!

What you are describing is the stale-while-revalidate / background-refresh state (what some libraries call isFetching vs isLoading): keep the previous result visible and run a light sweep over it instead of hiding everything and showing skeleton blocks.

I will add it as a separate mode.

The plan: the previous content stays visible and interactive, dimmed by default (around 50%) with a single light sweep passing over it. The dim level will be a CSS variable so you can take it down to zero (full opacity, light only) if you prefer.
It reuses the existing shimmer color, duration and direction.

Does that cover your grid case, or is there something in your setup I should account for?

Happy to take this on.

[hshahi]

Thank you, yes previous content remain visible but to be able to adjust this visibility or fading but not interactive in a way it responds to user click of course, I thought with your attractive light sweep going over it, it may be attractive. Again Thank you so much. I also think in future you can further make thing versatile by this light to have other effects, but I cant think of anything at the moment but you are the expert :)

[Aejkatappaja]

Thank you, yes previous content remain visible but to be able to adjust this visibility or fading but not interactive in a way it responds to user click of course, I thought with your attractive light sweep going over it, it may be attractive. Again Thank you so much. I also think in future you can further make thing versatile by this light to have other effects, but I cant think of anything at the moment but you are the expert :)

Hey, thanks for the follow-up and for the kind words!

Good news: I built this into a new mode="overlay".

When you set it, the previous result stays on screen, dimmed, while a light glint sweeps over each element (structure-aware, so it follows your actual layout). It's not interactive during the refresh, so users can't click stale content, but it stays readable and screen readers get an aria-busy signal. You can control the fade with a --phantom-content-opacity CSS variable (defaults to 0.5, set it to 1 if you want full opacity with just the light).

Typical usage is pairing it with your data library's two states, skeleton on the first load and overlay on refetch:

  <phantom-ui loading mode="overlay">
    <!-- your existing result, dimmed while it refreshes -->
  </phantom-ui>

It's in #48 and will ship in the next release.

On the "other effects for the light" idea, the existing animation modes (shimmer, pulse, breathe, solid) already apply to the glint, so there's some room to play there already.

Thanks again for the suggestion, it was a good one.

[Aejkatappaja]

Update: this is now live in v1.4.0 🎉

npm i @aejkatappaja/phantom-ui@latest

mode="overlay" is documented here: https://aejkatappaja.github.io/phantom-ui/reference/attributes/#mode

Enjoy, and thanks again for the suggestion!

[hshahi]

You welcome, I always value well structured patterns, designs, efforts. Perhaps one last thing you may want to consider is that to have one more direction that is diagonal, top left to bottom right. also adding opacity as variable to your perhaps. but its looking amazing

[Aejkatappaja]

You welcome, I always value well structured patterns, designs, efforts. Perhaps one last thing you may want to consider is that to have one more direction that is diagonal, top left to bottom right. also adding opacity as variable to your perhaps. but its looking amazing

Thanks, really glad you like it!

Good news on the opacity: it's already there. The overlay dim is controlled by the --phantom-content-opacity variable, and the shimmer itself takes its opacity straight from the alpha channel of --shimmer-color and --shimmer-bg (they're rgba), so you can tune both without any code change.

The diagonal direction is a nice call, a top-left to bottom-right sweep is a really common look and the current shimmer-direction only covers the four straight axes. I'll look into adding it. I'll ping you here if it lands in a release.

Thanks again for the thoughtful feedback!

[Aejkatappaja]

You welcome, I always value well structured patterns, designs, efforts. Perhaps one last thing you may want to consider is that to have one more direction that is diagonal, top left to bottom right. also adding opacity as variable to your perhaps. but its looking amazing

Hey, I actually prototyped the diagonal direction to try it out, and I'm going to pass on it, here's why.

Because phantom-ui measures your real elements, the blocks it generates have very different aspect ratios: near-square avatars, ultra-wide thin text lines, big chart areas. A linear-gradient at a fixed diagonal angle renders at a different visual angle depending on each block's width-to-height ratio, so across one skeleton the sweep ends up inconsistent, and on large blocks it reads as a big static gradient wash rather than a clean sweep. The four straight directions (ltr/rtl/ttb/btt) don't have this problem precisely because they're axis-aligned and independent of the block shape.

I could force a consistent angle with a transform-based streak, but it gets awkward on thin text lines and adds a separate code path just for one direction, so it's not a good tradeoff for the quality bar I want here.

Really appreciate you throwing ideas my way though, the overlay mode came straight from one of them. Keep them coming.

[hshahi]

Hey, Sure no problem, another idea also, although I am not sure how well it may look, this one looks a bit crazy. imagine that you have a grid and you start reloading from server. what if we generated slight vertical zoom from say left to right as another option. like as if you have a tube rolling underneath the carpet, so the raised level will be what is zoomed a bit from above. I am not sure if I explain it clearly or even it looks good at all. but since you said keep them coming I thought I mention it. Dont feel obliged though as I am not sure if it looks good or not, it could have dimmed background and zoom clearly on a thin vertical zoom. Take care

[Aejkatappaja]

Hey, Sure no problem, another idea also, although I am not sure how well it may look, this one looks a bit crazy. imagine that you have a grid and you start reloading from server. what if we generated slight vertical zoom from say left to right as another option. like as if you have a tube rolling underneath the carpet, so the raised level will be what is zoomed a bit from above. I am not sure if I explain it clearly or even it looks good at all. but since you said keep them coming I thought I mention it. Dont feel obliged though as I am not sure if it looks good or not, it could have dimmed background and zoom clearly on a thin vertical zoom. Take care

Hey, I can picture it, a little lens or bump rolling under the surface, that's a fun mental image. I'm going to pass on this one though, and it's worth explaining why.

The tricky part is that CSS transform: scale grows the whole block, not a thin vertical slice of it, so the "raised tube" distortion isn't something the transform can do. Getting a real localized lens effect means an SVG displacement filter or a canvas/WebGL pass, which is heavy, repaints constantly, and fights the reduced-motion accessibility path. That's a lot of weight and gimmick for a library I'm trying to keep tiny and calm.

There's also a practical catch: scaling blocks up makes them spill over their neighbors, so on a tight grid it turns into overlapping boxes rather than a clean wave.

And the intent behind it, a sense of activity sweeping across the layout, is already what the shimmer sweep does, so it wouldn't really add a new feeling on top.

Genuinely appreciate you keeping the ideas coming, though. The overlay mode exists because of one of yours, so please don't stop.

[hshahi]

Hi Again, I was wondering if I can have all the code in one or 2 file so that I can use it in my project in typescript. rather than use npm?

another question is that what can cause in our windows 11 os shimmer stop working and how I can override all the possibilities. one I know is that change accessibility animation true if it is turned off but I am sure other things may also stop animation to work. the other one is matchMedia('(prefers-reduced-motion: reduce)').matches if it is set.

[hshahi]

yes please as it is not just me, it is the whole 8 developers and management, please allow unminified typescript, so that it will build by our angular 21 process and that I have under a angular component so that it can be reused as I have it now but in this case I paste the source in that folder and that our build builds it. Many Thanks For your kind support.

[Aejkatappaja]

yes please as it is not just me, it is the whole 8 developers and management, please allow unminified typescript, so that it will build by our angular 21 process and that I have under a angular component so that it can be reused as I have it now but in this case I paste the source in that folder and that our build builds it. Many Thanks For your kind support.

Hi @hshahi , this is done and released as 1.6.1. Two files, no registry, no rename step, and it type-checks.

What to download

• https://github.com/Aejkatappaja/phantom-ui/releases/download/v1.6.1/phantom-ui.standalone.js
• https://github.com/Aejkatappaja/phantom-ui/releases/download/v1.6.1/phantom-ui.standalone.d.ts

The first one is the unminified build, about 1500 lines, readable for your review. Keep both filenames exactly as they are: TypeScript pairs a declaration to a module by filename, so those two names belong together. There is also a .min.js on the release if anyone wants the small one instead.

Drop them in your component folder:

   import "./phantom-ui.standalone.js";
   import type { PhantomUi } from "./phantom-ui.standalone.js";

I ran exactly that before writing this: downloaded both into an empty folder with no node_modules, strict: true, skipLibCheck: false, zero errors, with loading, mode, pierceShadow, shimmerColor and updateComplete all typed.

Two Angular things that will cost you time otherwise

Angular rejects an unknown custom element in a template, so the component needs the schema:

  import { CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";

  @Component({
    // ...
    schemas: [CUSTOM_ELEMENTS_SCHEMA],
  })

Without it you get NG0304: 'phantom-ui' is not a known element.

And bind through the attribute rather than the property:

  <phantom-ui [attr.loading]="loading() ? '' : null">

That is not cosmetic. [loading]="false" goes through the property, and until this week that path wrote an invalid value into aria-busy. The attr. form goes through the attribute converter and has always been correct.

If the download itself is blocked

Release links redirect to objects.githubusercontent.com, which a proxy can block separately from github.com. If that happens, the same two files are on the CDNs, which are different hosts again:

https://cdn.jsdelivr.net/npm/@aejkatappaja/phantom-ui@1.6.1/dist/phantom-ui.standalone.dev.js
https://cdn.jsdelivr.net/npm/@aejkatappaja/phantom-ui@1.6.1/dist/phantom-ui.standalone.d.ts

Note the .dev.js name inside the package. If you take them from the CDN, save the first one locally as phantom-ui.standalone.js so the pairing still works.

On it being TypeScript rather than JavaScript

I could not give you the authored sources, and the reason is concrete. Four of the source files import Lit, so pasting src/ into your project would need Lit installed, which is the registry you cannot reach. I also checked whether the bundle could simply be renamed to .ts and compiled: it cannot, tsc rejects bundled output.

So this is unminified bundled JavaScript with Lit inside it. Readable, reviewable, and your Angular build compiles it as a normal local module. The authored sources are in the repository if your review would rather read those, 9 files and about 1300 lines, MIT.

Making the sources compilable with nothing installed would mean removing Lit, which is close to half the bundle and a rewrite of the rendering path. If your organisation ends up blocked on exactly that, tell me and I will treat it as a design question rather than a support answer.

Thanks for staying with this. The vendoring path exists in the shape it does because you kept describing what actually blocked you.

[Aejkatappaja]

Hi @hshahi , following up with no urgency, mostly to check nothing is still blocking you.

Two things I would like to know when you get a chance:

1. Did the two release files actually download through your proxy, or did you need the jsDelivr fallback? If both hosts are blocked I would rather know, since it changes what I suggest to the next person in your situation.
2. With animation effects still turned off in Windows 11, does mode="overlay" now draw a static veil over each element in your grid instead of nothing? That is the one case I cannot verify myself, mine only emulates the setting.

Happy to leave the thread open until you have something.

[hshahi]

Hi Aejkatappaja, Sorry for late reply, the faded area screen still exactly look the same as before the fix and in truth we would like to have the animation regardless of the config changes of OS or any other reason, as for example other animation works in our application. is there a way to enforce this as otherwise there is no point for us to use it. Thanks

[Aejkatappaja]

Hi @hshahi , good news, your setup is exactly the one where this is easy to solve, and I can be specific.

First, to set expectations: what you are seeing is not a leftover bug. Under the OS reduced-motion setting the fix draws a static veil rather than nothing, so a dimmed area that does not move is the corrected behaviour, not the old one. You do not want the static veil though, you want the animation to run. That is a different thing, and it is the one you have been asking for.

I am not going to add a switch to the published library that overrides the OS setting, for the same reason as before: it is an accessibility preference, and a built-in toggle would hand everyone a way around it. But you are vendoring the file, which changes everything, because you own that copy and can make that call for your own app.

In phantom-ui.standalone.js, find this block and delete it:

  @media (prefers-reduced-motion: reduce) {
    .shimmer-block,
    :host([animation]) .shimmer-block {
      animation: none;
    }
    .shimmer-block::after {
      display: none;
    }
    :host([mode="overlay"]) .shimmer-block::after {
      display: block;
      animation: none;
      background: var(--shimmer-color);
    }
  }

That is the only thing in the file that reacts to the OS setting. With it gone, the shimmer runs the same whether reduced-motion is on or off, in both overlay and skeleton modes. I tested exactly that before writing this.

One honest note, not a lecture: that block exists for people who get motion sickness from moving UI, and you are choosing to remove it for your users. In an internal app where the rest of your UI already ignores the setting, that is a coherent and reasonable decision to make for your own build. It is yours to make precisely because it is your copy, which is why I would rather you edit it than ship the same override to everyone through the library.

Since you are pinning a vendored copy anyway, drop a comment next to that deletion noting why, so whoever updates the file next does not put it back by accident.

Anything else still in your way, tell me.