meistudioli

msc-ai-assistant

<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

<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.

msc-ai-summarization

<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

<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-any-fullscreen-popup

Imagine the feature to open a popup window in fullscreen mode. With window-management support, user could directly open a popup window in fullscreen mode in just one click.

msc-any-hint

Hint is a very common UI effect to help user easy understand particular nouns. With <msc-any-hint />, developers could adopt this feature to web page easier.

msc-any-pip

Imaging what if we can let anything Picture-in-Picture (not only <video />) ?! Here comes <msc-any-pip /> to let it dream comes true. <msc-any-pip /> apply Document Picture-in-Picture API to given elements have Picture-in-Picture feature.

msc-circle-progress

<msc-circle-progress /> provides progress with circle shape. Developers could use it to indicate upload、form complete status for users.

msc-code-viewer

As a web developer, show some demo code is a very common stuff. There are so many syntax highlighting libraries for the Web. highlight.js is one of the popular library. It is easy to use and there are so many themes for it. To make it more suitable for me

msc-collages

People love collages. With collages we could combined several images together and make them more vivid and interesting. Developers could apply <msc-collages /> instead of annoying HTML code & CSS setting. All we need to do is just make a few setting and e

msc-copy-button

Copy content is a very common feature to help user copy content easier. <msc-copy-button /> provides the whole feature including UI & interaction. With <msc-copy-button />, developers could adopt copy feature to web page easier.

msc-dialogs

<msc-dialogs /> is a common dialog effect. It comes with high customize user interface and show / close animation. It also suitable for all resolution. All we need to do is just put content we like to display as its children and everything will be all set

msc-drawer

Drawer effect provides extra promotion space for web page. It is also a common effect in web pages & APPs, such as Google APP applied it for image search or other related search results. Developers could also apply it for mentioning some information. <msc

msc-ez-catalog

Book reading is a very common UI effect to provide different browsing experience for users. With <msc-ez-catalog />, developers could adopt this feature to web page easier. All developers need to do is just providing series image paths in config and every

msc-ez-video

Modern browsers already had a vivid player for <video />. However, web developers and designers still want to custom their own style player for different situations. Sounds like web component will do a lot favor for this purpose. With <msc-ez-video /> sup

msc-help-me-write

「OpenAI」 is so powerful for all kinds services. That's why I try to adopt OpenAI to help Y! Auction's seller submit merchandise quickly. With <msc-help-me-write /> support, developers just need to set some configs and everything will be all set. All user

msc-hint

Hint is a very common UI effect to help user easy understand particular nouns. With msc-hint, developers could adopt this feature to web page easier.

msc-image-uploader

<msc-image-uploader /> is a web component based image uploader. Users could pick & upload images by 「file picker」、「drag & drop」and even direct「paste」image content. Besides that, users could also change images sorting through 「drag & drop」or 「keyboard arro

msc-input-assistant

<msc-input-assistant /> is a web component which help user to input wisely. Users could search or pick option with list we provide. Once options are not good enough for them, they can 「add」 their own options for usage.

msc-lens

Google Lens is famous and powerful for image search. Users could use its fancy UI for image selection. I like its effect and wanna to apply it for services I owned. That's also the main reason I wrapped it into <msc-lens />. Developers could received exac

msc-lightbox

<msc-lightbox /> is a lightbox effect component. Developers could set trigger & content through it. Once user press trigger, content will display as lightbox effect.

msc-line-clampin

<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-portable-video

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

<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.

msc-ripple

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 /