<msc-line-clampin /> is a common text render effect. Sometimes we like to hide text in a restrick area and provide a more button to expand the whole content. This is exactly what <msc-line-clampin /> do.
<msc-snackbar /> provide brief messages about app processes at the bottom of the screen. It's a web component and applied Material Design - Snackbar's spec.
Users used to experience autogrowing <textarea /> since Facebook announced this fancy effect. There are so many skills to apply this effect in web page. Here comes the most cleanest trick for autogrowing textareas. With this trick, decvelopers could apply
msc-tags-collector is a web component for input tags purpose. Users could key in anything they like (include space). Besides that sorting has already build-in with msc-tags-collector. We can go by 「DRAG」and「DROP」or ←、→ to arrange tag orders we like.
Push messaging provides a simple and effective way to re-engage with your users. Once users subscribed, vendor could push messaging for them. <msc-web-push /> provides a simple usage for developers. It will handle subscription process and UI mutations.
<msc-zoom /> is a web component. All we need to do is put the required script into your HTML document. Then follow <msc-zoom />'s html structure and everything will be all set.
<msc-ai-summarization /> is a web component based on Chrome Built-in AI > Summarization API. Web developers could use <msc-ai-summarization /> wrap article which want to adopt summarize feature.
<msc-ai-translator /> is a web component based on Chrome Built-in AI > Language Detector API and Translator API. Web developers could use <msc-ai-translator /> wrap article which want to adopt translate language feature.
<msc-circle-progress /> provides progress with circle shape. Developers could use it to indicate upload、form complete status for users.
Video - the most popular content in web page. Visitors always attracted with vivid contents. That's why editor like to place video contents in web page. We could see these video modules fixed in web page corner easily, such as YouTube. It's a very common
<msc-reminder /> provides a notification features for user. It applied slot to open a tunnel let developers put LightDOM elements into ShadowDOM. That means developers could use any design they like as content to display.
Interaction with UI mutation is usability 101 level stuff. Web developers should always keep this in mind to let user realize which element has beeb tapped. I like Google Material Design's ripple effect when user taped some clickable elements, suh as <a /
<msc-select-list /> provides a common UI as <select /> and group checkboxs as its drop menu. So user could experience it as usual and have multi-select feature.
A sidebar provides a way to display meta content intended for temporary access (navigation links, buttons, menus, etc.). The sidebar can be revealed by a button tap while the main content remains visually underneath.
<msc-ai-assistant /> is a web component based on Chrome Built-in AI Prompt API. Web developers could use <msc-ai-assistant /> to help user consult anything they like to know.
<msc-ai-prompt /> is a web component based on Chrome Built-in AI Prompt API. Web developers could use <msc-ai-prompt /> wrap form element and give it prompt feature support.
Web Components for previewing MTG card images automatically
A simple Koko component
A simple web component with props
A React component packaged for use in other apps